import {
    FormControl,
    FormControlLabel,
    RadioGroup as MuiRadioGroup,
    RadioGroupProps as MuiRadioGroupProps,
    Radio,
    Typography
} from "@mui/material";
import React, { useState } from "react";
import { SvgIcon } from "../SvgIcon/SvgIcon";

interface RadioOption {
    value: string;
    label: string;
    subLabel?: string
    confidence?: string;
}


export interface RadioGroupProps extends MuiRadioGroupProps {
    options: RadioOption[];
    initialValue?: string;
    iconName?: string;
    onOptionChange?: (value: string) => void;
}

export const RadioButton = ({
    options,
    initialValue,
    onChange,
    onOptionChange,
    iconName,
    ...rest
}: RadioGroupProps) => {
    const [selectedValue, setSelectedValue] = useState(initialValue);

    const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const newValue = event.target.value;
        setSelectedValue(newValue);
        if (onOptionChange) {
            onOptionChange(event.target.value);
        }

    };

    return (
        <FormControl component="fieldset">
            <MuiRadioGroup
                aria-label="radio-group"
                name="radio-group"
                value={selectedValue}
                onChange={handleRadioChange}
                {...rest}
            >
                {options.map((option) => (

                    <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: 8 }}>
                        <div style={{ display: 'flex' }} >
                            <FormControlLabel style={{ marginRight: 0, marginTop: -8 }} key={option.value}
                                value={option.value}
                                control={<Radio size="small" />}
                                label={''} />
                            {iconName ? (
                                <SvgIcon name={iconName} width="20" height="20"></SvgIcon>
                            ) : (<></>)}
                        </div>

                        <div style={{ marginLeft: 8 }}>
                            <Typography className="text-small font-regular">{option.label} <span className="text-placeholder">({option.confidence}% confidence)</span></Typography>
                            {
                                option?.subLabel ? (<Typography className="text-primary text-xsmall font-regular">{option?.subLabel}</Typography>) : (<></>)
                            }
                        </div>
                    </div>

                ))}
            </MuiRadioGroup>
        </FormControl>
    );
};