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

const useMenuListContainerStyles = makeStyles({
    container: {
        backgroundColor: tokens.colorNeutralBackground1,
        minWidth: '128px',
        minHeight: '48px',
        maxWidth: '300px',
        width: 'max-content',
        boxShadow: `${tokens.shadow16}`,
        paddingTop: '4px',
        paddingBottom: '4px',
    },
});

const CutIcon = bundleIcon(CutFilled, CutRegular);

const PasteIcon = bundleIcon(ClipboardPasteFilled, ClipboardPasteRegular);

const EditIcon = bundleIcon(EditFilled, EditRegular);

export const CheckboxItems = (): JSXElement => {
    const styles = useMenuListContainerStyles();
    return (<div className={styles.container}>
      <MenuList>
        <MenuItemCheckbox icon={<CutIcon />} name="edit" value="cut">
          Cut
        </MenuItemCheckbox>
        <MenuItemCheckbox icon={<PasteIcon />} name="edit" value="paste">
          Paste
        </MenuItemCheckbox>
        <MenuItemCheckbox icon={<EditIcon />} name="edit" value="edit">
          Edit
        </MenuItemCheckbox>
      </MenuList>
    </div>);
};

export default CheckboxItems;