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

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import type { ToolbarProps } from "@coreai-ds/react-components";
import { Toolbar } from "@coreai-ds/react-components";
import { ToolbarToggleButton } from "@coreai-ds/react-components";
import { TextBold24Regular } from "@fluentui/react-icons";
import { TextItalic24Regular } from "@fluentui/react-icons";
import { TextUnderline24Regular } from "@fluentui/react-icons";

export const ControlledToggleButton = (): JSXElement => {
    const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({
        textOptions: ['bold', 'italic'],
    });
    const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
        setCheckedValues(s => {
            return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
        });
    };
    return (<Toolbar aria-label="with controlled Toggle Button" checkedValues={checkedValues} onCheckedValueChange={onChange}>
      <ToolbarToggleButton aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold"/>
      <ToolbarToggleButton aria-label="Italic" icon={<TextItalic24Regular />} name="textOptions" value="italic"/>
      <ToolbarToggleButton aria-label="Underline" icon={<TextUnderline24Regular />} name="textOptions" value="underline"/>
    </Toolbar>);
};

export default ControlledToggleButton;