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

import { useId } from "@coreai-ds/react-components";
import * as React from 'react';
import { Label } from "@coreai-ds/react-components";
import { Input } from "@coreai-ds/react-components";
import { Switch } from "@coreai-ds/react-components";

// ---------- Disabled ----------
export const Disabled = () => {
    const idPrefix = 'input-disabled-story';
    const inputIds = {
        default: useId(idPrefix),
        filledDarker: useId(idPrefix),
        filledLighter: useId(idPrefix),
        underline: useId(idPrefix),
    };
    const [disabled, setDisabled] = React.useState(true);
    const styles = /* css */ `
    .input-disabled-example {
      display: flex;
      flex-direction: column;
      max-width: 400px;
    }

    .input-disabled-example__field {
      display: grid;
      row-gap: var(--spacingVerticalXXS);
      margin-top: var(--spacingVerticalL);
    }

    .input-disabled-example__field--filled-lighter {
      margin-inline: -48px;
      padding-block: var(--spacingVerticalXXL);
      padding-inline: 48px;
      background-color: var(--colorNeutralBackground3);
    }

    .input-disabled-example__toggle {
      margin-top: var(--spacingVerticalXL);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="input-disabled-example">
        <div className="input-disabled-example__field">
          <Label htmlFor={inputIds.default}>Disabled (outline appearance)</Label>
          <Input appearance="outline" disabled={disabled} id={inputIds.default} defaultValue="disabled value"/>
        </div>
        <div className="input-disabled-example__field">
          <Label htmlFor={inputIds.filledDarker}>
            Disabled (filled darker appearance, CoreAI default)
          </Label>
          <Input appearance="filled-darker" disabled={disabled} id={inputIds.filledDarker} defaultValue="disabled value"/>
        </div>
        <div className="input-disabled-example__field input-disabled-example__field--filled-lighter">
          <Label htmlFor={inputIds.filledLighter}>Disabled (filled lighter appearance)</Label>
          <Input appearance="filled-lighter" disabled={disabled} id={inputIds.filledLighter} defaultValue="disabled value"/>
        </div>
        <div className="input-disabled-example__field">
          <Label htmlFor={inputIds.underline}>Disabled (underline appearance)</Label>
          <Input appearance="underline" disabled={disabled} id={inputIds.underline} defaultValue="disabled value"/>
        </div>
        <Switch className="input-disabled-example__toggle" checked={disabled} label="Disabled" onChange={(_e, data) => setDisabled(data.checked)}/>
      </div>
    </>);
};

export default Disabled;