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

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import { useId } from "@coreai-ds/react-components";
import * as React from 'react';
import type { DrawerProps } from "@coreai-ds/react-components";
import { useRestoreFocusTarget } from "@coreai-ds/react-components";
import { useRestoreFocusSource } from "@coreai-ds/react-components";
import { OverlayDrawer } 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 { Label } from "@coreai-ds/react-components";
import { RadioGroup } from "@coreai-ds/react-components";
import { Radio } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    main: {
        display: 'grid',
        justifyContent: 'flex-start',
        gridRowGap: tokens.spacingVerticalXXL,
    },
    field: {
        display: 'grid',
        gridRowGap: tokens.spacingVerticalS,
    },
});

type DrawerSizeStory = Required<DrawerProps>['size'];

export const Size = (): JSXElement => {
    const styles = useStyles();
    const labelId = useId('size-label');
    const [open, setOpen] = React.useState(false);
    const [size, setSize] = React.useState<DrawerSizeStory>('small');
    const labelMap: Record<DrawerSizeStory, string> = {
        small: 'Small (Default)',
        medium: 'Medium',
        large: 'Large',
        full: 'Full',
    };
    // 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();
    return (<div>
      <OverlayDrawer size={size} {...restoreFocusSourceAttributes} position="end" open={open} onOpenChange={(_, state) => setOpen(state.open)}>
        <DrawerHeader>
          <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} onClick={() => setOpen(false)}/>}>
            {labelMap[size]} size
          </DrawerHeaderTitle>
        </DrawerHeader>

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

      <div className={styles.main}>
        <Button {...restoreFocusTargetAttributes} appearance="primary" onClick={() => setOpen(true)}>
          Open Drawer
        </Button>

        <div className={styles.field}>
          <Label id={labelId}>Size</Label>
          <RadioGroup value={size} onChange={(_, data) => setSize(data.value as DrawerSizeStory)} aria-labelledby={labelId}>
            {Object.keys(labelMap).map(key => (<Radio key={key} value={key} label={labelMap[key as DrawerSizeStory]}/>))}
          </RadioGroup>
        </div>
      </div>
    </div>);
};

export default Size;