// 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 { coreaiLightTheme } from "@coreai-ds/react-components";
import { coreaiDarkTheme } from "@coreai-ds/react-components";

export const DefaultTheme = () => {
    const CoreAISample = ({ mode }: {
        mode: 'light' | 'dark';
    }) => {
        const [checked, setChecked] = React.useState(true);
        return (<div className="coreai-provider-default-theme-example__panel">
          <Text preset="heading4">CoreAI {mode === 'light' ? 'Light' : 'Dark'}</Text>
          <Text preset="body">
            The default CoreAI brand ramp with all neutral, font, and custom-token overrides
            applied.
          </Text>
          <div className="coreai-provider-default-theme-example__buttons">
            <Button appearance="primary">Primary</Button>
            <Button appearance="outline">Outline</Button>
            <Button appearance="subtle">Subtle</Button>
          </div>
          <div className="coreai-provider-default-theme-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-default-theme-example {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacingHorizontalL);
      }

      .coreai-provider-default-theme-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-default-theme-example__buttons {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacingHorizontalS);
        align-items: center;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="coreai-provider-default-theme-example">
          <CoreAIFluentProvider theme={coreaiLightTheme}>
            <CoreAISample mode="light"/>
          </CoreAIFluentProvider>
          <CoreAIFluentProvider theme={coreaiDarkTheme}>
            <CoreAISample mode="dark"/>
          </CoreAIFluentProvider>
        </div>
      </>);
};

export default DefaultTheme;