import React, { useState, useEffect } from 'react'
import {
    Button,
    FormControl,
    Grid,
    InputLabel,
    Select,
    TextField,
    Typography,
    Radio,
    FormControlLabel,
    DialogActions,
    Dialog,
    DialogContent,
    DialogContentText,
    DialogTitle,
    IconButton,
    Icon,
    Tooltip,
    RadioGroup,
    MenuItem,Checkbox
} from '@material-ui/core'
import { toast } from 'react-toastify'
import { useTranslation } from 'react-i18next'
import { KeyboardDatePicker } from '@material-ui/pickers'
import {
    convertDate,
    toPriceVndInput,
    convertViToEn,
} from 'app/config/Function'
import {
    TextValidator,
    ValidatorForm,
    SelectValidator,
} from 'react-material-ui-form-validator'
import {dropdownProductType,dropdownProcutByType}  from 'app/apis/Functions/dropdown'

export default function FormDialog({ onCreate }) {
    const [open, setOpen] = React.useState(false)
    const { t } = useTranslation()
    const [state, setState] = useState({})
    const [listType, setListType] = useState([])
    const [listProduct, setListProduct] = useState([])
    const [product,setProduct]=useState()
    const [is_api,setIsApi]=useState(false)
    const [type, setType] = useState()


    useEffect(()=>{
        setProduct()

        if(type){
            getDropdownProduct(type)
        }
        

    },[type])

    useEffect(() => {
        
        getData()
    }, [])
    const getData = async () => {
        const res = await dropdownProductType({})
        if (res.data.code == 200 && res.data.data) {
            const newList = res.data.data.map((e) => {
                return {  ...e,name: e.type_name, value: e.id}
            })
            setListType(newList)
        } 
        else {
            toast.error('Lấy giữ liệu thất bại !', {
                theme: 'colored',
            })
        }
    }
    const getDropdownProduct= async (type) => {
        const res = await dropdownProcutByType(type)
        if (res.data.code == 200 && res.data.data) {
            const newList = res.data.data.map((e) => {
                return {  ...e,name: e.product_name, value: e.id}
            })
            setListProduct(newList)
        } 
        else {
            toast.error('Lấy giữ liệu thất bại !', {
                theme: 'colored',
            })
        }
    }



    function handleClickOpen() {
        setOpen(true)
    }

    function handleClose() {
        setOpen(false)
    }

    const handleSubmit = async (value) => {

        if(state?.product_id && state?.name?.trim()  &&  state?.code?.trim()){
            let index=listProduct.findIndex(e=>e.id==state.product_id)
            if(index!=-1){
           onCreate({...state,type,type_name:listProduct[index].type_name, product_name: listProduct[index].product_name,is_api})
           setOpen(false)
           setState({})
           setType()
        } 

        }else{

            toast.warning('Bạn chưa nhập đầy đủ thông tin', {
                theme: 'colored',
            })
        }
       

      

    }

    const handleChange = (event) => {
        event.persist()
        setState({
            ...state,
            [event.target.name]: event.target.value,
        })
    }

    const { product_id, name, code,domain,client_id,client_secret ,supplier_main} = state

   

    return (
        <>
            <Tooltip title="Thêm mới vòi xăng">
                <IconButton onClick={handleClickOpen}>
                    <Icon style={{ color: '#4caf50' }}>add_circle</Icon>
                </IconButton>
            </Tooltip>
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="form-dialog-title"
            >
                
                    <DialogTitle id="form-dialog-title">
                        Thêm vòi xăng
                    </DialogTitle>

                    <DialogContent>
                        <Grid container spacing={2}>
                        <Grid item lg={12} md={12} sm={12} xs={12}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Mã vòi xăng *"
                                    onChange={handleChange}
                                    variant="outlined"
                                    type="text"
                                    name="code"
                                    value={code || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>
                            <Grid item lg={12} md={12} sm={12} xs={12}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Tên vòi xăng *"
                                    onChange={handleChange}
                                    variant="outlined"
                                    type="text"
                                    name="name"
                                    value={name || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>
                          

                            <Grid item lg={12} md={12} sm={12} xs={12}>
                                <SelectValidator
                                    variant={'outlined'}
                                    label={'Loại nguyên liệu *'}
                                    className="mb-4 w-full"
                                    value={type || ''}
                                    displayEmpty
                                    name="merchan_id"
                                    onChange={(event) => {
                                        setType(event.target.value)
                                    }}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                >
                                    {listType.map((e) => (
                                        <MenuItem value={e.id}>
                                            {e.name}
                                        </MenuItem>
                                    ))}
                                </SelectValidator>
                            </Grid>

                            <Grid item lg={12} md={12} sm={12} xs={12}>
                                <SelectValidator
                                    variant={'outlined'}
                                    label={'Loại xăng *'}
                                    className="mb-4 w-full"
                                    value={product_id || ''}
                                    displayEmpty
                                    name="product_id"
                                    onChange={handleChange}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                >
                                    {listProduct.map((e) => (
                                        <MenuItem value={e.id}>
                                            {e.name}
                                        </MenuItem>
                                    ))}
                                </SelectValidator>
                            </Grid>

                            {/* <Grid item lg={12} md={12} sm={12} xs={12}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Base url *"
                                    onChange={handleChange}
                                    variant="outlined"
                                    type="text"
                                    name="domain"
                                    value={domain || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>
                            <Grid item lg={12} md={12} sm={12} xs={12}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Mã khách hàng *"
                                    onChange={handleChange}
                                    variant="outlined"
                                    type="text"
                                    name="client_id"
                                    value={client_id || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>
                            <Grid item lg={12} md={12} sm={12} xs={12}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Mật  khẩu*"
                                    onChange={handleChange}
                                    variant="outlined"
                                    type="text"
                                    name="client_secret"
                                    value={client_secret || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>
                            <Grid item lg={12} md={12} sm={12} xs={12}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Nhà cung cấp bo mạch *"
                                    onChange={handleChange}
                                    variant="outlined"
                                    type="text"
                                    name="supplier_main"
                                    value={supplier_main || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>



                            <Grid lg={12} md={12} sm={12} xs={12} item>
                                    <FormControlLabel
                                        className="min-w-288"
                                        control={
                                            <Checkbox
                                                size="small"
                                                color="primary"
                                                onChange={(event) => {
                                                    setIsApi(
                                                        event.target.checked
                                                    )
                                                }}
                                                value={is_api}
                                            />
                                        }
                                        label="Sử dụng api truyền nhận"
                                    />
                                </Grid> */}


                        </Grid>
                    </DialogContent>
                    <DialogActions>
                        <Button color="secondary" onClick={()=>{
                            
                            handleClose()
                            setType()
                            setProduct()
                        setState({})
                        }}>
                            Thoát
                        </Button>
                        <Button onClick={handleSubmit} color="primary">
                            Đồng ý
                        </Button>
                    </DialogActions>
               
            </Dialog>
        </>
    )
}
