// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { CodeBlock } from "@coreai-ds/react-components";
import { Dropdown } from "@coreai-ds/react-components";
import { Option } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";

export const Header = () => {
    const codeSamples = {
        json: `{
  "name": "coreai-docs",
  "theme": "coreai",
  "features": ["search", "feedback"]
}`,
        yaml: `name: coreai-docs
theme: coreai
features:
  - search
  - feedback`,
        markdown: `# coreai-docs
- Theme: \`coreai\`
- Features:
  - search
  - feedback`,
    };
    type CodeSampleLanguage = keyof typeof codeSamples;
    const languageLabels: Record<CodeSampleLanguage, string> = {
        json: 'JSON',
        yaml: 'YAML',
        markdown: 'Markdown',
    };
    const tsSample = `import { Button } from "@coreai-ds/react-components";

export function Save(): JSX.Element {
  // Click to persist the current document.
  return <Button appearance="primary">Save</Button>;
}`;
    const [language, setLanguage] = React.useState<CodeSampleLanguage>('json');
    const styles = /* css */ `
      .code-block-header-example {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacingVerticalL);
        max-width: 640px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="code-block-header-example">
          <CodeBlock code={codeSamples[language]} language={language} header={<>
                <Dropdown label="Format" dynamicWidth appearance="filled-lighter" size="small" value={languageLabels[language]} selectedOptions={[language]} onOptionSelect={(_event, data) => {
                if (data.optionValue && data.optionValue in codeSamples) {
                    setLanguage(data.optionValue as CodeSampleLanguage);
                }
            }}>
                  <Option value="json">JSON</Option>
                  <Option value="yaml">YAML</Option>
                  <Option value="markdown">Markdown</Option>
                </Dropdown>
                <Button appearance="subtle" size="small" shape="rounded">
                  API Keys
                </Button>
              </>}/>

          <CodeBlock code={tsSample} language="tsx" headerAppearance="subtle" header={<Text preset="bodyXS" foreground={3}>
                TypeScript - SaveButton.tsx
              </Text>}/>
        </div>
      </>);
};

export default Header;