// 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 * as React from 'react';
import type { DropdownProps } from "@coreai-ds/react-components";
import type { CheckboxProps } from "@coreai-ds/react-components";
import { useId } from "@coreai-ds/react-components";
import { Checkbox } from "@coreai-ds/react-components";
import { Dropdown } from "@coreai-ds/react-components";
import { Option } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    root: {
        // Stack the label above the field with a gap
        display: 'grid',
        gridTemplateRows: 'repeat(1fr)',
        justifyItems: 'start',
        gap: '2px',
        maxWidth: '400px',
    },
});

export const ControllingOpenAndClose = (): JSXElement => {
    const styles = useStyles();
    const [open, setOpen] = React.useState(false);
    const handleOpenChange: DropdownProps['onOpenChange'] = (e, data) => setOpen(data.open);
    const onChange: CheckboxProps['onChange'] = (e, data) => setOpen(!!data.checked);
    const dropdownId = useId('dropdown');
    const options = ['Cat', 'Caterpillar', 'Corgi', 'Chupacabra', 'Dog', 'Ferret', 'Fish', 'Fox', 'Hamster', 'Snake'];
    return (<div className={styles.root}>
      <Checkbox value="open" name="state" label="open" checked={open} onChange={onChange}/>
      <label htmlFor={dropdownId}>Best pet</label>
      <Dropdown id={dropdownId} placeholder="Select an animal" open={open} onOpenChange={handleOpenChange}>
        {options.map(option => (<Option key={option} disabled={option === 'Ferret'}>
            {option}
          </Option>))}
      </Dropdown>
    </div>);
};

export default ControllingOpenAndClose;