import React, { useState } from 'react';
import { Box, FormControlLabel, Grid, Modal, Radio, TextField, Typography } from '@mui/material';
import { Add, Close, InfoOutlined } from '@mui/icons-material';
import './newIntentModal.css';
import Button from '../../../../../../components/Button/Button';
import { InfoCircleIcon } from '../../../../../../components/aisera-icons/custom';
import { Select } from '../../../../../../components/Select/Select';
import { RadioButton } from '../../../../../../components/RadioButton/RadioButton';

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

export interface IntentOptions {
    height?: string;
    initialValue?: string;
    width?: string;
    requests: number;
    categorization: DropdownData;
    radioData: any;
}

export const ButtonComponent = ({ ...intentOptions }: IntentOptions) => {

    const [open, setOpen] = useState(false);

    const handleOpen = () => {
        setOpen(true);
    };
    const handleCategorization = (value: any) => {
        if (intentOptions?.categorization?.onOptionChange) {
            intentOptions.categorization.onOptionChange(value);
        }
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div style={{ height: intentOptions.height, width: intentOptions.width, padding: "16px" }}>
            <Button startIcon={<Add />} onClick={handleOpen} variant="outlined" label={'New Intent'}>
            </Button>
            <Modal style={{  overflowY: 'scroll' }} open={open} onClose={handleClose}>
                <Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 690, bgcolor: 'background.paper', borderRadius: '4px 4px 4px 4px', border: '1px solid var(--ui-off-white, #EBEBEB)', p: 2 }}>
                    <Close />
                    <div className="text-regular font-regular ">New Intent</div>
                    <hr />
                    <div>
                        <Grid style={{ display: 'flex' }} container spacing={0} columns={16}>
                            <Grid item xs={5} sx={{ display: 'flex', alignSelf: 'center', paddingTop: 2 }}>
                                <Typography className="text-small font-bold text-subtitle">Name</Typography>
                                <span className="text-red">*</span>
                                <InfoCircleIcon />
                            </Grid>
                            <Grid item xs={11}>
                                <TextField className='search' variant="outlined" size="small" margin="normal" />
                            </Grid>
                        </Grid>
                        <Grid container spacing={0} columns={16} sx={{ paddingBottom: 0 }}>
                            <Grid item xs={5} sx={{ display: 'flex', alignSelf: 'center' }}>
                                <Typography className="text-small font-bold text-subtitle">Display Name</Typography>
                                <InfoCircleIcon />
                            </Grid>
                            <Grid item xs={10}>
                                <TextField className='search' variant="outlined" size="small" margin="normal" />
                            </Grid>
                        </Grid>
                        <Grid container spacing={0} columns={16} sx={{ paddingTop: 2 }}>
                            <Grid item xs={5} sx={{ display: 'flex', alignSelf: 'center' }}>
                                <Typography className="text-small font-bold text-subtitle">Category</Typography>
                                <span className="text-red">*</span>
                                <InfoCircleIcon />
                            </Grid>
                            <Grid item xs={8} className='search'>
                                <Select onOptionChange={handleCategorization} className="search storybook-exercise-dropdown" size="small" options={intentOptions.categorization.options}></Select>
                            </Grid>
                        </Grid>
                        <Grid container spacing={0} columns={16} sx={{ paddingTop: 2 }}>
                            <Grid item xs={5} sx={{ display: 'flex', alignSelf: 'center' }}>
                                <Typography className="text-small font-bold text-subtitle">Intent Fulfillment </Typography>
                            </Grid>
                            <Grid item xs={8}>
                                <Select onOptionChange={handleCategorization} className="storybook-exercise-dropdown" size="small" options={intentOptions.categorization.options}></Select>
                            </Grid>
                        </Grid>
                        <Grid container spacing={0} columns={16} sx={{ paddingTop: 2 }}>
                            <Grid item xs={5} sx={{ display: 'flex', alignSelf: 'center' }}>
                            </Grid>
                            <Grid item xs={8}>
                                <RadioButton options={intentOptions.radioData.options} iconName={intentOptions.radioData.iconName}></RadioButton>
                            </Grid>
                        </Grid>
                        {/* <ModalRadioGroup options={[]} initialValue={''}>
                            {options.map((option) => (
                                <FormControlLabel
                                    key={option.value}
                                    value={option.value}
                                    control={<Radio />}
                                    label={option.label}
                                />
                            ))}      </ModalRadioGroup> */}


                        <Grid container spacing={0} columns={16} sx={{ paddingTop: 2 }}>
                            <Grid item xs={5} sx={{ display: 'flex', alignSelf: 'center' }}>
                                <Typography className="text-small font-bold text-subtitle">Sample Phrase</Typography>
                            </Grid>
                            <Grid item xs={11}>
                                <TextField className='search' variant="outlined" size="small" margin="normal" />
                            </Grid>
                        </Grid>
                        <hr />
                        <div style={{ marginTop: 20, display: 'flex', justifyContent: 'flex-end' }}>
                            <Button variant="text" onClick={handleClose} label={'Cancel'}>
                            </Button>
                            <Button variant="contained" color="primary" style={{ marginLeft: 10 }} label={'Save'}>
                            </Button>
                        </div>
                    </div>
                </Box>
            </Modal>
        </div>
    );
};

export default ButtonComponent;