import * as React from 'react';
import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Tooltip from '@mui/material/Tooltip';
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';

interface ToggleButtonGroupOption {
    value: string;
    label: string;
    icon: React.ReactElement | string;
    disabled?: boolean;
    tooltip?: string;
}

interface MuiToggleButtonGroupProps extends FormElementProps<string | string[]> {
    options: ToggleButtonGroupOption[];
}




const renderIcon = (icon: React.ReactElement | string) => {
    if (typeof icon === 'string') {
        return <img src={icon} alt="" style={{ width: 24, height: 24 }} />;
    }
    return icon;
};

const renderTooltipButton = (option: ToggleButtonGroupOption) => {
    const button = (
        <Tooltip title={option.tooltip || option.label}>
        <ToggleButton 
            value={option.value} 
            aria-label={option.label}
            disabled={option.disabled}
        >
            {renderIcon(option.icon)}
        </ToggleButton>
        </Tooltip>
    );

    return button}
/**
 * A Workflow element for single choice toggle buttons with tooltips.
 * @displayName Mui Single Toggle Button
 * @description Version 1.4 - Single choice toggle button group with tooltips
 * @param props The props that will be provided by the Workflow runtime.
 */
function MuiSingleToggleButtonGroup(props: MuiToggleButtonGroupProps): React.ReactElement {
    const { setValue, value, options } = props;

    const handleChange = (
        event: React.MouseEvent<HTMLElement>,
        newValue: string | null,
    ) => {
        setValue(newValue || "");
    };

    return (
        <ToggleButtonGroup
            value={value}
            exclusive
            onChange={handleChange}
            aria-label="single toggle button group"
        >
            {options.map(renderTooltipButton)}
        </ToggleButtonGroup>
    );
}

/**
 * A Workflow element for multiple choice toggle buttons with tooltips.
 * @displayName Mui Multiple Toggle Button
 * @description Version 1.2 - Multiple choice toggle button group with tooltips
 * @param props The props that will be provided by the Workflow runtime.
 */
function MuiMultipleToggleButtonGroup(props: MuiToggleButtonGroupProps): React.ReactElement {
    const { setValue, value, options } = props;

    const handleChange = (
        event: React.MouseEvent<HTMLElement>,
        newValue: string[],
    ) => {
        setValue(newValue);
    };

    return (
        <ToggleButtonGroup
            value={value}
            onChange={handleChange}
            aria-label="multiple toggle button group"
        >
            {options.map(renderTooltipButton)}
        </ToggleButtonGroup>
    );
}

const MuiSingleToggleButtonGroupElementRegistration: FormElementRegistration<MuiToggleButtonGroupProps> = {
    component: MuiSingleToggleButtonGroup,
    getInitialProperties: () => ({
        value: "",
        options: [
            { value: "left", label: "Left Aligned", icon: <FormatAlignLeftIcon />, tooltip: "Align Left" },
            { value: "center", label: "Centered", icon: <FormatAlignCenterIcon />, tooltip: "Align Center" },
            { value: "right", label: "Right Aligned", icon: <FormatAlignRightIcon />, tooltip: "Align Right" },
            { value: "justify", label: "Justified", icon: <FormatAlignJustifyIcon />, disabled: true, tooltip: "Justify" },
        ],
    }),
    id: "MuiSingleToggleButtonGroup",
};

const MuiMultipleToggleButtonGroupElementRegistration: FormElementRegistration<MuiToggleButtonGroupProps> = {
    component: MuiMultipleToggleButtonGroup,
    getInitialProperties: () => ({
        value: [],
        options: [
            { value: "bold", label: "Bold", icon: <FormatAlignLeftIcon />, tooltip: "Bold" },
            { value: "italic", label: "Italic", icon: <FormatAlignCenterIcon />, tooltip: "Italic" },
            { value: "underline", label: "Underline", icon: <FormatAlignRightIcon />, tooltip: "Underline" },
        ],
    }),
    id: "MuiMultipleToggleButtonGroup",
};

export { MuiSingleToggleButtonGroupElementRegistration, MuiMultipleToggleButtonGroupElementRegistration };