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



export interface DropdownData {
    options: any[];
    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;
    tableData: any;
}

export const EntityComponent = ({ ...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={'Update 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 }}>
                    <div className="text-regular font-regular">Update Intent</div>
                    <hr />
                    <div>
                        <Grid container spacing={0} columns={16} sx={{ paddingTop: 1 }}>
                            <Grid item xs={16} sx={{ display: 'flex', alignSelf: 'center' }}>
                                <Typography className="text-small font-bold text-subtitle">Select an Intent</Typography>
                                <span className="text-red">*</span>
                            </Grid>
                            <Grid item xs={12} style={{ paddingTop: 1, width: '530px' }}>
                                <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={12}>
                                <RadioButton options={intentOptions.radioData.options} iconName={intentOptions.radioData.iconName}></RadioButton>
                            </Grid>
                        </Grid>

                        <Grid container spacing={0} columns={16}>
                            <Grid item xs={16} sx={{ display: 'flex', alignSelf: 'center', paddingTop: 1 }}>
                                <Typography className="text-small font-bold text-subtitle">Phrases to Add(1)</Typography>
                            </Grid>

                        </Grid>
                        <Grid container spacing={0} columns={25}>
                            <Grid item xs={12} >
                                <TextField style={{ width: '486px' }} variant="outlined" size="small" margin="normal" />
                            </Grid>
                            <Grid item xs={4}>
                                <div className='trash-alignment'>
                                <TrashDeleteIcon />
                                </div>
                            </Grid>
                        </Grid>

                        <hr style={{
                            borderStyle: 'dashed',
                            borderWidth: 1,
                            color: '#B2B2B2',
                            borderRadius: 1,
                        }} />
                        Fulfilments(1)
                        <CustomTable headers={[intentOptions.tableData.headers]} data={[intentOptions.tableData.data]} showColumnVerticalBorder={true}></CustomTable>
                        <hr />
                        <div style={{ marginTop: 20, display: 'flex', justifyContent: 'flex-end' }}>
                            <Button label={'Cancel'} variant="text" onClick={handleClose}>
                            </Button>
                            <Button label={'Save'} variant="contained" color="primary" style={{ marginLeft: 10 }}>
                            </Button>
                        </div>
                    </div>
                </Box>
            </Modal>
        </div>
    );
};