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

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import type { MenuProps } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItemRadio } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { CutFilled } from "@fluentui/react-icons";
import { CutRegular } from "@fluentui/react-icons";
import { ClipboardPasteFilled } from "@fluentui/react-icons";
import { ClipboardPasteRegular } from "@fluentui/react-icons";
import { EditFilled } from "@fluentui/react-icons";
import { EditRegular } from "@fluentui/react-icons";

const CutIcon = bundleIcon(CutFilled, CutRegular);

const PasteIcon = bundleIcon(ClipboardPasteFilled, ClipboardPasteRegular);

const EditIcon = bundleIcon(EditFilled, EditRegular);

export const ControlledRadioItems = (): JSXElement => {
    const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({ font: ['calibri'] });
    const onChange: MenuProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
        setCheckedValues(s => ({ ...s, [name]: checkedItems }));
    };
    return (<Menu checkedValues={checkedValues} onCheckedValueChange={onChange}>
      <MenuTrigger disableButtonEnhancement>
        <Button>Toggle menu</Button>
      </MenuTrigger>
      <MenuPopover>
        <MenuList>
          <MenuItemRadio icon={<CutIcon />} name="font" value="segoe">
            Segoe
          </MenuItemRadio>
          <MenuItemRadio icon={<PasteIcon />} name="font" value="calibri">
            Calibri
          </MenuItemRadio>
          <MenuItemRadio icon={<EditIcon />} name="font" value="arial">
            Arial
          </MenuItemRadio>
        </MenuList>
      </MenuPopover>
    </Menu>);
};

export default ControlledRadioItems;