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( props) {
    const { t } = useTranslation()
    const { open, handleClose, data, onAgree } = props
   
  
    const [state, setState] = useState({})
    const [listType, setListType] = useState([])
    const [listProduct, setListProduct] = useState([])
    const [product,setProduct]=useState()
    const [type, setType] = useState()
    const [is_api,setIsApi]=useState(false)
 

    useEffect(()=>{
        if(data){
            setState({...data})
            if(data.type){
                setType(data.type)
            }else{
                setType(data.product_type_id)
            }
          
            setProduct(data.product_id)
        }

    },[data,open])


    useEffect(()=>{
       
        setState({...state})
        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',
            })
        }
    }



    
 

    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){
            console.log(listProduct[index])
            console.log("listProduct",listProduct)
        
            console.log('state', state)

       onAgree({...state,type,type_name:listProduct[index].type_name, product_name: listProduct[index].product_name,code:state.code,is_api})}
        }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

    console.log("listType",listType)

    return (
       
          
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="form-dialog-title"
            >
                
                    <DialogTitle id="form-dialog-title">
                        Cập nhật 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"
                                    defaultValue={true}
                                    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>
                          
                            {type &&  <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>}

                           {product_id &&   <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}>
                            Thoát
                        </Button>
                        <Button onClick={handleSubmit} color="primary">
                            Đồng ý
                        </Button>
                    </DialogActions>
                  
            </Dialog>
       
    )
}