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 } = 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()
        }
    }, [province_id])

    useEffect(() => {
        if (district_id) {
            getDataWard()
        }
    }, [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 (
        <>
            <Grid item lg={6} md={6} sm={12} xs={12}>
                {nation_id ? (
                    <SelectValidator
                        variant={'outlined'}
                        label="Quốc gia *"
                        className="mb-4 w-full"
                        disabled
                        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>
                ) : null}
            </Grid>

            <Grid item lg={6} md={6} sm={12} xs={12}>
                {province_id || province_id ? (
                    <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>
                ) : null}
            </Grid>

            <Grid item lg={6} md={6} sm={12} xs={12}>
                {district || district_id ? (
                    <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>
                ) : null}
            </Grid>

            <Grid item lg={6} md={6} sm={12} xs={12}>
                {ward || ward_id ? (
                    <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>
                ) : null}
            </Grid>
        </>
    )
}

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