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

import * as React from 'react';
import { Text } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Switch } from "@coreai-ds/react-components";
import { Spinner } from "@coreai-ds/react-components";
import { Link } from "@coreai-ds/react-components";
import { CoreAIFluentProvider } from "@coreai-ds/react-components";
import { azureLightTheme } from "@coreai-ds/react-components";
import { azureDarkTheme } from "@coreai-ds/react-components";

export const AzureBrandTheme = () => {
    const AzureSample = ({ mode }: {
        mode: 'light' | 'dark';
    }) => {
        const [checked, setChecked] = React.useState(true);
        return (<div className="coreai-provider-azure-brand-example__panel">
          <Text preset="heading4">Azure {mode === 'light' ? 'Light' : 'Dark'}</Text>
          <Text preset="body">
            Components below inherit the Azure brand ramp while keeping every CoreAI neutral, font,
            and custom-token override.
          </Text>
          <div className="coreai-provider-azure-brand-example__buttons">
            <Button appearance="primary">Primary</Button>
            <Button appearance="outline">Outline</Button>
            <Button appearance="subtle">Subtle</Button>
          </div>
          <div className="coreai-provider-azure-brand-example__buttons">
            <Switch checked={checked} onChange={(_, data) => setChecked(data.checked)} label="Brand switch"/>
            <Spinner size="tiny"/>
            <Link href="#">Brand link</Link>
          </div>
        </div>);
    };
    const styles = /* css */ `
      .coreai-provider-azure-brand-example {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacingHorizontalL);
      }

      .coreai-provider-azure-brand-example__panel {
        flex: 1 1 280px;
        min-width: 280px;
        display: flex;
        flex-direction: column;
        row-gap: var(--spacingVerticalS);
        padding: var(--spacingHorizontalL);
        border-radius: var(--borderRadiusXLarge);
        background-color: var(--colorNeutralBackground1);
        color: var(--colorNeutralForeground1);
      }

      .coreai-provider-azure-brand-example__buttons {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacingHorizontalS);
        align-items: center;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="coreai-provider-azure-brand-example">
          <CoreAIFluentProvider theme={azureLightTheme}>
            <AzureSample mode="light"/>
          </CoreAIFluentProvider>
          <CoreAIFluentProvider theme={azureDarkTheme}>
            <AzureSample mode="dark"/>
          </CoreAIFluentProvider>
        </div>
      </>);
};

export default AzureBrandTheme;