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



interface RadioOption {
    value: string;
    label: string;
}

export interface DropdownData {
    options: any[];

    label?: string;
    value?: string;
    width?: string;
    onOptionChange?: (value: string) => void;
}

export interface IntentOptions {
    height?: string;
    radioOptions?: RadioOption[];
    initialValue?: string;
    width?: string;
    requests: number;
    categorization: DropdownData;
    tableData: any;

}

export const EntityComponent = ({ height, width, radioOptions, initialValue, ...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: height, width: width, padding: "16px" }}>
            <Button startIcon={<Add />} onClick={handleOpen} variant="outlined" label={'New Entity'}>
            </Button>
            <Modal 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">New Entity</div>
                    <hr />
                    <div>
                        <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">Name</Typography>
                                <span className="text-red">*</span>
                            </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">Entity Class</Typography>
                            </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={{ paddingBottom: 0 }}>
                            <Grid item xs={5} sx={{ display: 'flex', alignSelf: 'center' }}>
                                <Typography className="text-small font-bold text-subtitle">Synonyms to Add (1)</Typography>
                            </Grid>
                            <Grid item xs={10}>
                                <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' }}>
                            </Grid>
                            <Grid item xs={10}>
                            <Button startIcon={<Add />} variant="text" label={'Add a Synonym'}>
                        </Button>
                            </Grid>
                        </Grid>
                        
                        <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>
    );
};