// 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 * as React from 'react';
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 { Field } from "@coreai-ds/react-components";
import { Input } from "@coreai-ds/react-components";

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

export const CustomSize = (): JSXElement => {
    const styles = useStyles();
    const [open, setOpen] = React.useState(false);
    const [customSize, setCustomSize] = React.useState(600);
    // 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 {...restoreFocusSourceAttributes} open={open} position="end" onOpenChange={(_, state) => setOpen(state.open)} style={{ width: `${customSize}px` }}>
        <DrawerHeader>
          <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} onClick={() => setOpen(false)}/>}>
            Drawer with {customSize}px 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}>
          <Field label="Size">
            <Input pattern="[0-9]*" value={customSize.toString()} onChange={(_, data) => setCustomSize(data.value ? parseInt(data.value, 10) : 0)}/>
          </Field>
        </div>
      </div>
    </div>);
};

export default CustomSize;