import SellOutlinedIcon from '@mui/icons-material/SellOutlined';
import { Grid, Typography } from "@mui/material";
import { Autocomplete } from "../Autocomplete/Autocomplete";
import { Select } from "../Select/Select";
import { SelectChip } from "../SelectChip/SelectChip";
import './exercise-options.scss';

export interface DropdownData {
    options: any[];
    label?: string;
    value?: string;
    width?: string;
    onOptionChange?: (value: string) => void;
}

export interface TagsData {
    options: any[];
    label: string;
    width: string;
    onOptionChange?: (value: string) => void;
}

export interface ExerciseOptions {
    height?: string;
    width?: string;
    requests: number;
    categorization: DropdownData;
    resolutionType: DropdownData;
    resolution: DropdownData;
    tags: TagsData;
}

export const ExerciseOptions = ({ height, width, ...exerciseOptions }: ExerciseOptions) => {

    const handleCategorization = (value: any) => {
        if (exerciseOptions?.categorization?.onOptionChange) {
            exerciseOptions.categorization.onOptionChange(value);
        }
    };

    const handleResolutionType = (value: any) => {
        if (exerciseOptions?.resolutionType?.onOptionChange) {
            exerciseOptions.resolutionType.onOptionChange(value);
        }
    };

    const handleResolution = (value: any) => {
        if (exerciseOptions?.resolution?.onOptionChange) {
            exerciseOptions.resolution.onOptionChange(value);
        }
    };

    const handleTags = (value: any) => {
        if (exerciseOptions?.tags?.onOptionChange) {
            exerciseOptions.tags.onOptionChange(value);
        }
    };

    return (
        <div className="exercise-options">
            <Typography className="font-regular text-regular text-title grid-category ">exercise <span className="text-violet">options</span> flow</Typography>
            <Grid className="grid-category" container columns={16} >
                <Grid item xs={6}>
                    <Typography className="text-small font-bold text-subtitle">Cluster: </Typography>
                </Grid>
                <Grid item xs={10}>
                    <Typography className="text-small font-regular text-primary cluster-value">Exercise Options ({exerciseOptions.requests} Requests)</Typography>
                </Grid>
            </Grid>
            <Grid className="grid-category" container columns={16}>
                <Grid className="label" item xs={6}>
                    <Typography className="text-small font-bold text-subtitle">Auto-Categorization: </Typography>
                </Grid>
                <Grid xs={10} className="auto-categorization select-control" item>
                    <Select onOptionChange={handleCategorization} className="storybook-exercise-dropdown" options={exerciseOptions.categorization.options}></Select>
                </Grid>
            </Grid>
            <Grid className="grid-category" container columns={16} >
                <Grid className="label" item xs={6} >
                    <Typography className="text-small font-bold text-subtitle">Resolution Type: </Typography>
                </Grid>
                <Grid className="resolution-type select-control" item xs={10}>
                    <Select onOptionChange={handleResolutionType} className="storybook-exercise-dropdown" options={exerciseOptions.resolutionType.options}></Select>

                </Grid>
            </Grid>
            <Grid className="grid-category" container columns={16} >
                <Grid className="label" item xs={6} >
                    <Typography className="text-small font-bold text-subtitle">Resolution: </Typography>
                </Grid>
                <Grid className="resolution select-control" item xs={10}>
                    <SelectChip onOptionChange={handleResolution} className="storybook-exercise-dropdown" options={exerciseOptions.resolution.options}></SelectChip>
                </Grid>
            </Grid>
            <Grid className="grid-category" container columns={16}>
                <Grid className="label" item xs={6}>
                    {/* <SvgIcon name="user"></SvgIcon> */}
                    <SellOutlinedIcon style={{ color: "#838B9C" }} />
                    <Typography className="text-small font-bold text-subtitle">Tags: </Typography>
                </Grid>
                <Grid className="tags select-control" item xs={10}>
                    <Autocomplete onOptionChange={handleTags} size="small" variant="outlined" renderInput={(params) => null} className="storybook-exercise-dropdown" options={exerciseOptions.tags.options}></Autocomplete>
                </Grid>
            </Grid>

        </div>

    );
}