import React, { useState, useEffect } from 'react'
import {
    ValidatorForm,
    TextValidator,
    SelectValidator,
} from 'react-material-ui-form-validator'
import {
    Button,
    Grid,
    MenuItem,
    FormControlLabel,
    Checkbox,
    Typography,
} from '@material-ui/core'
import { createFunction } from 'app/apis/Functions/function'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import { Breadcrumb, SimpleCard } from 'app/components'
import { Link, useHistory, useLocation } from 'react-router-dom'
import { trimObject, encryString } from 'app/config/Function'
import { connect } from 'react-redux'
import {
    dropdownDepartment,
    dropdownUserGroup,
    getDropDownGroup,
} from 'app/apis/Functions/dropdown'
import PickerImage from 'app/components/Input/PickerImage'
import {
    actionByGroup,
    createEmployee,
    detailEmployee,
    updateEmployee,
} from 'app/apis/Functions/Employee'
import { useTranslation } from 'react-i18next'

const SimpleForm = (props) => {
    const [state, setState] = useState({})
    const [listDepartment, setListDepartment] = useState([])
    const [listDrop, setListDrop] = useState([])
    const [listAction, setListAction] = useState([])
    const [image, setImage] = useState()
    const [listChecked, setListChecked] = useState([])
    const [role, setRole] = useState()
    const [listGroup, setGroup] = useState([])
    const [checkAll, setCheckAll] = useState(true)
    const location = useLocation()
    const [defaultAction, setDefaultAction] = useState([])
    const { t } = useTranslation()

    useEffect(() => {
        getUserGroup()
        getData()
    }, [])
    useEffect(() => {
        getListDefault()
    }, [defaultAction])

    useEffect(() => {
        getListAction()
        setListChecked([])
    }, [role])
    const history = useHistory()

    const getListDefault = () => {
        const newList = defaultAction.map((e) => {
            return e.action_id
        })
        setListChecked(newList)
    }

    const getData = async () => {
        props.showLoading()
        Promise.all([
            detailEmployee(location.state, {}),
            getDropDownGroup({}),
        ]).then((values) => {
            setState(values[0].data.data)
            setImage(values[0].data.data.avatar)
            setRole(values[0].data.data.user_group_id)

            // setBirdth(convertTimeApi(values[0].data.data.birth_day))
            // setGender(values[0].data.data.gender == 6 ? '6' : '7')
            setGroup(values[1].data.data)
            setDefaultAction(values[0].data.data.userPermissions)
        })
        props.hideLoading()
    }

    const getListAction = async () => {
        if (role) {
            const res = await actionByGroup(role, {})
            console.log('res.data.data', res.data.data)
            if (res.data.code == 200 && res.data.data) {
                let newList = res.data.data.userGroupPermissions
                newList.sort((a, b) =>
                    a.function_name.localeCompare(b.function_name)
                )

                setListAction(newList)
            } else if (res.data.code == 401) {
                setTimeout(() => {
                    history.push('/')
                }, 100)
            } else {
                toast.error(t(res.data.error), {
                    theme: 'colored',
                })
            }
        }
    }

    const getUserGroup = async () => {
        const res = await dropdownUserGroup({})

        if (res.data.code == 200 && res.data.data) {
            setGroup(res.data.data)
        } else if (res.data.code == 401) {
            setTimeout(() => {
                history.push('/')
            }, 100)
        } else {
            toast.error(t(res.data.error), {
                theme: 'colored',
            })
        }
    }

    const handleSubmit = async (event) => {
        const newValue = trimObject(state)
        if (listChecked.length > 0) {
            // if (image) {
            const newList = listChecked.map((e) => {
                return { action_id: e }
            })

            props.showLoading()
            const res = await updateEmployee({
                ...newValue,
                user_group_id: role,
                userPermissions: newList,
                avatar: image,
            })
            console.log(res)
            props.hideLoading()
            if (res.data.code == 200) {
                history.push('/employee')
                if (res.data.code == 200) {
                    toast.success('Cập nhật nhân viên thành công!', {
                        theme: 'colored',
                    })
                }
            } else {
                toast.error(t(res.data.error), {
                    theme: 'colored',
                })
            }
        } else {
            toast.warning('Bạn chưa chọn ảnh đại diện cho nhân viên!', {
                theme: 'colored',
            })
        }
        // } else {
        //     toast.warning('Bạn chưa thêm quyền cho nhân viên!', {
        //         theme: 'colored',
        //     })
        // }
    }

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

    const onFileChange = (url) => {
        console.log(url)
        setImage(url)
    }

    const onPicker = (value) => {
        if (value.target.checked) {
            const newList = listChecked.concat(value.target.name)
            setListChecked(newList)
        } else {
            const newList = listChecked.filter((e) => {
                return e != value.target.name
            })
            setListChecked(newList)
        }
    }

    const handleCheckAllRole = (event) => {
        setCheckAll(!checkAll)
        if (checkAll == true) {
            const newList = listAction.map((e) => e.action_id)
            setListChecked(newList)
        } else {
            setListChecked([])
        }
    }

    console.log('role', role)

    const { username, password, phone, email, address, full_name } = state
    return (
        <div className="m-sm-30">
            <div className="mb-sm-30">
                <div className="mb-sm-30">
                    <Breadcrumb
                        routeSegments={[
                            {
                                name: 'Danh sách  nhân viên',
                                path: '/employee',
                            },
                            { name: 'Thêm mới  nhân viên' },
                        ]}
                    />
                </div>
                <SimpleCard>
                    <ValidatorForm onSubmit={handleSubmit} onError={() => null}>
                        <Grid container spacing={3}>
                            <Grid item lg={12} md={12} sm={12} xs={12}>
                                <PickerImage
                                    images={image}
                                    onFileChange={onFileChange}
                                    title={'Ảnh đại diện'}
                                />
                            </Grid>
                            <Grid item lg={6} md={6} sm={12} xs={12}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Tên nhân viên *"
                                    onChange={handleChange}
                                    type="text"
                                    name="full_name"
                                    value={full_name || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>
                            <Grid item lg={6} md={6} sm={12} xs={12}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Số điện thoại *"
                                    onChange={handleChange}
                                    type="text"
                                    name="phone"
                                    value={phone || ''}
                                    validators={[
                                        'required',
                                        'isNumber',
                                        'minStringLength:10',
                                        'maxStringLength:12',
                                    ]}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                        'Trường này phải nhập số ',
                                        'Số điện thoại phải có ít nhất 10 chữ số',
                                        'Số điện thoại nhiều nhất chỉ có 12 chữ số',
                                    ]}
                                />
                            </Grid>
                            <Grid item lg={6} md={6} sm={12} xs={12}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Email *"
                                    onChange={handleChange}
                                    type="text"
                                    name="email"
                                    value={email || ''}
                                    validators={['required', 'isEmail']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                        'Email không hợp lệ',
                                    ]}
                                />
                            </Grid>

                            <Grid item lg={6} md={6} sm={12} xs={12}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Địa chỉ *"
                                    onChange={handleChange}
                                    type="text"
                                    name="address"
                                    value={address || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>

                            <Grid item lg={6} md={6} sm={12} xs={12}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Tên đăng nhập *"
                                    onChange={handleChange}
                                    disabled
                                    type="text"
                                    name="username"
                                    value={username || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>
                            {/* <Grid item lg={6} md={6} sm={12} xs={12}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Mật khẩu *"
                                    onChange={handleChange}
                                    type="password"
                                    name="password"
                                    value={password || ''}
                                    validators={[
                                        'required',
                                        'minStringLength:8',
                                    ]}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                        'Mật khẩu phải có ít nhất 8 ký tự',
                                    ]}
                                />
                            </Grid> */}
                            {role && (
                                <Grid lg={6} md={6} sm={12} xs={12} item>
                                    <SelectValidator
                                        variant={'outlined'}
                                        label={'Nhóm quyền *'}
                                        className="w-full"
                                        value={role}
                                        displayEmpty
                                        onChange={(e) =>
                                            setRole(e.target.value)
                                        }
                                        validators={['required']}
                                        errorMessages={[
                                            'Không được để trống trường này',
                                        ]}
                                    >
                                        {listGroup.map((e) => (
                                            <MenuItem value={e.id}>
                                                {e.name}
                                            </MenuItem>
                                        ))}
                                    </SelectValidator>
                                </Grid>
                            )}

                            <Grid item xs={12} sm={12}>
                                <Typography variant={'h6'}>
                                    Danh sách hành động
                                </Typography>
                                {listAction.length > 0 ? (
                                    <Grid lg={12} md={12} sm={12} xs={12} item>
                                        <FormControlLabel
                                            className="min-w-288"
                                            control={
                                                <Checkbox
                                                    size="small"
                                                    color="primary"
                                                    name="is_customer_data_manager"
                                                    onChange={
                                                        handleCheckAllRole
                                                    }
                                                    value={checkAll}
                                                />
                                            }
                                            label="Chọn tất cả các quyền"
                                        />
                                    </Grid>
                                ) : null}

                                <Grid row container item xs={12} sm={12}>
                                    {listAction.map((e) => (
                                        <Grid item xs={3}>
                                            <FormControlLabel
                                                label={e.action_name}
                                                control={
                                                    <Checkbox
                                                        size="small"
                                                        color="primary"
                                                        onChange={onPicker}
                                                        name={e.action_id}
                                                        checked={listChecked.includes(
                                                            e.action_id
                                                        )}
                                                    />
                                                }
                                            />
                                        </Grid>
                                    ))}
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container justify={'flex-end'}>
                            <Link to="/employee">
                                <Button
                                    style={{
                                        marginRight: 20,
                                    }}
                                    color="inherit"
                                    variant="contained"
                                    onClick={() => {}}
                                >
                                    <span className="capitalize">Quay lại</span>
                                </Button>
                            </Link>
                            <Button
                                color="primary"
                                variant="contained"
                                type="submit"
                            >
                                <span className="capitalize">Cập nhật</span>
                            </Button>
                        </Grid>
                    </ValidatorForm>
                </SimpleCard>
            </div>
        </div>
    )
}

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