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

import type { DrawerProps } from "@coreai-ds/react-components";
import { useId } from "@coreai-ds/react-components";
import * as React from 'react';
import { useRestoreFocusTarget } from "@coreai-ds/react-components";
import { useRestoreFocusSource } from "@coreai-ds/react-components";
import { Drawer } from "@coreai-ds/react-components";
import { DrawerHeader } from "@coreai-ds/react-components";
import { DrawerHeaderTitle } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Dismiss24Regular } from "@fluentui/react-icons";
import { DrawerBody } from "@coreai-ds/react-components";
import { ToggleButton } from "@coreai-ds/react-components";
import { Label } from "@coreai-ds/react-components";
import { RadioGroup } from "@coreai-ds/react-components";
import { Radio } from "@coreai-ds/react-components";

export const Default = () => {
    type DrawerType = Required<DrawerProps>['type'];
    const labelId = useId('type-label');
    const [isOpen, setIsOpen] = React.useState(false);
    const [type, setType] = React.useState<DrawerType>('overlay');
    // all Drawers need manual focus restoration attributes
    // unless (as in the case of some inline drawers, you do not want automatic focus restoration)
    const restoreFocusTargetAttributes = useRestoreFocusTarget();
    const restoreFocusSourceAttributes = useRestoreFocusSource();
    const styles = /* css */ `
      .drawer-default-example {
        border: 2px solid #ccc;
        overflow: hidden;
        display: flex;
        height: 480px;
        background-color: #fff;
      }

      .drawer-default-example__content {
        flex: 1;
        padding: var(--spacingHorizontalL);
        display: grid;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: var(--spacingVerticalXXL);
        grid-auto-rows: max-content;
      }

      .drawer-default-example__field {
        display: grid;
        row-gap: var(--spacingVerticalS);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="drawer-default-example">
          <Drawer {...restoreFocusSourceAttributes} type={type} separator open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
            <DrawerHeader>
              <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} onClick={() => setIsOpen(false)}/>}>
                Default Drawer
              </DrawerHeaderTitle>
            </DrawerHeader>

            <DrawerBody>
              <p>Drawer content</p>
            </DrawerBody>
          </Drawer>

          <div className="drawer-default-example__content">
            {type === 'inline' ? (<ToggleButton {...restoreFocusTargetAttributes} appearance="primary" onClick={() => setIsOpen(!isOpen)} checked={isOpen}>
                Toggle
              </ToggleButton>) : (<Button {...restoreFocusTargetAttributes} appearance="primary" onClick={() => setIsOpen(!isOpen)}>
                Open
              </Button>)}

            <div className="drawer-default-example__field">
              <Label id={labelId}>Type</Label>
              <RadioGroup value={type} onChange={(_, data) => setType(data.value as DrawerType)} aria-labelledby={labelId}>
                <Radio value="overlay" label="Overlay (Default)"/>
                <Radio value="inline" label="Inline"/>
              </RadioGroup>
            </div>
          </div>
        </div>
      </>);
};

export default Default;