import React, { useState, useEffect } from 'react'
import {
    ValidatorForm,
    TextValidator,
    SelectValidator,
} from 'react-material-ui-form-validator'
import {
    Button,
    Icon,
    Grid,
    Radio,
    RadioGroup,
    FormControlLabel,
    Checkbox,
    TextField,
    Typography,
    MenuItem,
} from '@material-ui/core'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import { connect } from 'react-redux'
import { useHistory } from 'react-router-dom'

import {
    dropdownGetINation,
    dropdownGetIProvince,
    dropdownGetIProvinceBy,
} from 'app/apis/Functions/dropdown'

const ProvinceSelect = (props) => {
    const {
        nation_id,
        province_id,
        district_id,
        ward_id,
        handleChange,
        isCustomer,
    } = props
    const [nation, setNation] = useState()
    const [province, setProvince] = useState()
    const [district, setDistrict] = useState()
    const [ward, setWard] = useState()
    const history = useHistory()

    useEffect(() => {
        getDataNation()
        getDataProvince()
    }, [])

    useEffect(() => {
        if (province_id) {
            getDataDistrict()
        }
        if (district_id) {
            getDataWard()
        }
    }, [province_id, district_id])

    const getDataNation = async () => {
        props.showLoading()
        const res = await dropdownGetINation({})
        props.hideLoading()
        if (res.data.code == 200 && res.data.data) {
            setNation(res.data.data)
        } else if (res.data.code == 401) {
            setTimeout(() => {
                history.push('/')
            }, 100)
        } else {
            toast.error('Lấy giữ liệu thất bại !', {
                theme: 'colored',
            })
        }
    }

    const getDataProvince = async () => {
        props.showLoading()
        const res = await dropdownGetIProvince({})
        props.hideLoading()
        if (res.data.code == 200 && res.data.data) {
            setProvince(res.data.data)
        } else if (res.data.code == 401) {
            setTimeout(() => {
                history.push('/')
            }, 100)
        } else {
            toast.error('Lấy giữ liệu thất bại !', {
                theme: 'colored',
            })
        }
    }

    const getDataDistrict = async () => {
        props.showLoading()
        const res = await dropdownGetIProvinceBy(province_id, {})
        props.hideLoading()
        if (res.data.code == 200 && res.data.data) {
            setDistrict(res.data.data)
        } else if (res.data.code == 401) {
            setTimeout(() => {
                history.push('/')
            }, 100)
        } else {
            toast.error('Lấy giữ liệu thất bại !', {
                theme: 'colored',
            })
        }
    }

    const getDataWard = async () => {
        props.showLoading()
        const res = await dropdownGetIProvinceBy(district_id, {})
        props.hideLoading()
        if (res.data.code == 200 && res.data.data) {
            setWard(res.data.data)
        } else if (res.data.code == 401) {
            setTimeout(() => {
                history.push('/')
            }, 100)
        } else {
            toast.error('Lấy giữ liệu thất bại !', {
                theme: 'colored',
            })
        }
    }

    return (
        <>
            {!isCustomer ? (
                <Grid item lg={6} md={6} sm={12} xs={12}>
                    <SelectValidator
                        variant={'outlined'}
                        label="Quốc gia *"
                        className="mb-4 w-full"
                        value={nation_id}
                        displayEmpty
                        name="nation_id"
                        onChange={handleChange}
                        validators={['required']}
                        errorMessages={['Không được để trống trường này']}
                    >
                        {nation?.map((e) => (
                            <MenuItem value={e.id}>{e.name}</MenuItem>
                        ))}
                    </SelectValidator>
                </Grid>
            ) : null}
            <Grid item lg={6} md={6} sm={12} xs={12}>
                <SelectValidator
                    variant={'outlined'}
                    label="Tỉnh thành phố *"
                    className="mb-4 w-full"
                    value={province_id}
                    displayEmpty
                    name="province_id"
                    onChange={handleChange}
                    validators={['required']}
                    errorMessages={['Không được để trống trường này']}
                >
                    {province?.map((e) => (
                        <MenuItem value={e.id}>{e.name}</MenuItem>
                    ))}
                </SelectValidator>
            </Grid>

            <Grid item lg={6} md={6} sm={12} xs={12}>
                <SelectValidator
                    variant={'outlined'}
                    label="Quận huyện *"
                    className="mb-4 w-full"
                    value={district_id}
                    displayEmpty
                    name="district_id"
                    onChange={handleChange}
                    validators={['required']}
                    errorMessages={['Không được để trống trường này']}
                >
                    {district?.map((e) => (
                        <MenuItem value={e.id}>{e.name}</MenuItem>
                    ))}
                </SelectValidator>
            </Grid>

            <Grid item lg={6} md={6} sm={12} xs={12}>
                <SelectValidator
                    variant={'outlined'}
                    label="Xã phường *"
                    className="mb-4 w-full"
                    value={ward_id}
                    displayEmpty
                    name="ward_id"
                    onChange={handleChange}
                    validators={['required']}
                    errorMessages={['Không được để trống trường này']}
                >
                    {ward?.map((e) => (
                        <MenuItem value={e.id}>{e.name}</MenuItem>
                    ))}
                </SelectValidator>
            </Grid>
        </>
    )
}

const mapStateToProps = (state) => {
    return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
    ProvinceSelect
)