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

import type { ToolbarProps } from "@coreai-ds/react-components";
import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import { Toolbar } from "@coreai-ds/react-components";
import { ToolbarRadioGroup } from "@coreai-ds/react-components";
import { ToolbarRadioButton } from "@coreai-ds/react-components";
import { AlignLeft24Regular } from "@fluentui/react-icons";
import { AlignCenterHorizontal24Regular } from "@fluentui/react-icons";
import { AlignRight24Regular } from "@fluentui/react-icons";

export const ControlledRadio = (props: Partial<ToolbarProps>): JSXElement => {
    const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({
        textOptions: ['center'],
    });
    const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
        setCheckedValues(s => {
            return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
        });
    };
    return (<Toolbar aria-label="with controlled Radio Button" checkedValues={checkedValues} onCheckedValueChange={onChange}>
      <ToolbarRadioGroup>
        <ToolbarRadioButton aria-label="Align left" name="textOptions" value="left" icon={<AlignLeft24Regular />}/>
        <ToolbarRadioButton aria-label="Align Center" name="textOptions" value="center" icon={<AlignCenterHorizontal24Regular />}/>
        <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="right" icon={<AlignRight24Regular />}/>
      </ToolbarRadioGroup>
    </Toolbar>);
};

export default ControlledRadio;