import { UploadOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Button as ButtonAntd, DatePicker, Form, Input, Radio, Upload, Select,Switch } from 'antd';
import { useLocation } from 'react-router-dom';
import viVN from 'antd/lib/locale/vi_VN';
import axios from 'axios';
import moment from 'moment';
import 'moment/locale/vi';
import React, { useEffect, useRef, useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
import swal from 'sweetalert';
import { HOST } from '../../config/index';

const { Option } = Select;


const ModalUser = (props) => {
    const { show, onHide, data } = props;
    const [crrImages, setCrrImages] = useState([]);

    const [form] = Form.useForm()

    const [listOptions, setListOption] = useState([])



    const [birthday, setBirthday] = useState(moment())
    const [crrData, setCrrData] = useState(null);

    const [selectedRole, setSelectedRole] = useState("")
    const [active, setActive] = useState(false)

    const [checkDeleteMulti, setCheckDeleteMulti] = useState(false);
    const [crrIdx, setCrrIdx] = useState(0)
    const [listChecked, setListChecked] = useState({ url: [] });

    const [disableBtn, setDisableBtn] = useState(true);

    const [dateImage, setDateImg] = useState("")

    const [dataUpload, setDataUpload] = useState([])

    const [hostImg, setHostImg] = useState('');

    useEffect(() => {
        setCrrData(data);
    }, [data]);

    useEffect(() => {
        getLevel()
    }, [])



    const getLevel = async () => {
        let result = await axios.get(`${HOST}/api/levels/company/1`)
        if (result.data.status === 10000) {
            var listOptions = []
            for (let i = 0; i < result.data.data.length; i++) {
                const element = result.data.data[i];
                console.log(element.name)
                listOptions.push(<Option key={element._id}>{element.name}</Option>);
            }
            setListOption(listOptions)

        }
    }


    const click_handle = async () => {
        let dataPost = {
            obj_id: crrData?._id ? crrData._id : "",
            username: crrData.username,
            full_name: crrData.full_name,
            password: crrData.password,
            is_deleted: 0,
            birthday: crrData.birthday,
            gender: crrData?.gender ? crrData.gender : "",
            phone_number: crrData?.phone_number ? crrData?.phone_number : "",
            level_obj_id: selectedRole
        }
        const result = await axios({
            method: 'POST',
            url: `${HOST}/api/users/insert_or_update`,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                // 'Authorization': token,
            },
            data: dataPost,
        })
        if (result.data.status === 10000) {
            if (crrData._id) {
                swal({
                    icon: 'success',
                    title: 'Thành công',
                    text: 'Sửa thông tin thành công',
                    timer: 1500,
                    buttons: false,
                })
                onHide()
            } else {
                swal({
                    icon: 'success',
                    title: 'Thành công',
                    text: 'Thêm mới thành công',
                    timer: 1500,
                    buttons: false,
                })
                onHide()
            }
        } else if (result.data.status === 10002) {
            swal("Thất bại", "Lỗi hệ thống!", "error");
        } else if (result.data.status === 10004) {
            swal("Thất bại", "Tài khoản đã tồn tại!", "error");
        } else if (result.data.status === 10003) {
            swal("Thất bại", "Tài khoản không được để trống!", "error");
        } else {
            if (crrData._id) {
                swal("Thất bại", "Sửa thông tin thất bại!", "error");
            } else {
                swal("Thất bại", "Thêm mới thất bại!", "error");
            }
        }
    }


    const UserHandle = (e) => {
        setCrrData({ ...crrData, [e.target.name]: e.target.value })
    }

    const onChangeBirthday = (date) => {
        setBirthday(date)
        setCrrData({ ...crrData, birthday: moment(date).format("YYYY-MM-DD") })
    }

  

    const handleChangeSelect = (value) => {
        setSelectedRole(value)
    }

    const onChangeActive = (value) => {
        setActive(value)
    }

    if (!crrData) return <></>;

    return (
        <Modal
            {...props}
            animation={false}
            size="md"
            // keyboard={false}
            // dialogClassName={`${window.innerWidth >= 1920 ? "modal-size-res" : "modal-size"}`}
            aria-labelledby="contained-modal-title-vcenter"
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">{crrData?._id ? "Sửa thông tin" : "Thêm mới"}
                </Modal.Title>
            </Modal.Header>

            <Modal.Body>
                <div id="formUpdateMeeting">
                    <div className="m-widget14 p-0">
                        <div className="row">
                            <div className="col-md-12 d-flex flex-column justify-content-between">
                                <Form
                                    id="formEdit"
                                    form={form}
                                    layout="vertical"
                                    onFinish={() => click_handle()}
                                    // onFinishFailed={onFinishFailed}
                                    autoComplete="off"
                                    initialValues={{
                                        full_name: crrData?.full_name,
                                        gender: crrData?.gender,
                                        username: crrData?.username,
                                        level_obj_id: crrData?.level_obj_id,
                                        phone_number: crrData?.phone_number
                                    }}
                                >
                                    <Form.Item
                                        label="Tên đăng nhập"
                                        name="username"
                                        rules={[{
                                            required: true,
                                            message: ""
                                             },{
                                                pattern: /^(?=.{3,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+$/,
                                                message: 'Tên đăng nhập có độ dài từ 3-20 ký tự,không có khoảng trắng và ký tự đặc biệt',
                                            }
                                            ]}
                                    >
                                        <Input autoComplete="new-username" placeholder="Tên đăng nhập" value={crrData?.name} onChange={e => UserHandle(e)} name='username' />
                                    </Form.Item>
                                    {!crrData?._id && 
                                       <Form.Item
                                       label="Mật khẩu"
                                       name="password"
                                       rules={[{ required: true, message: '' }]}
                                   >
                                       <Input.Password autoComplete="new-password" placeholder="Mật khẩu" value={crrData?.password} onChange={e => UserHandle(e)} name='password' />
                                    </Form.Item>
                                    }
                                 
                                    <Form.Item
                                        label="Họ tên"
                                        name="full_name"
                                        rules={[{ required: true, message: '' }]}
                                    >
                                        <Input placeholder="Họ tên" value={crrData?.full_name} onChange={e => UserHandle(e)} name='full_name' />
                                    </Form.Item>
                                    <Form.Item
                                        label="Số điện thoại"
                                        name="phone_number"
                                    >
                                        <Input placeholder="Điện thoại" value={crrData?.name} onChange={e => UserHandle(e)} name='phone_number' />
                                    </Form.Item>

                                    <Form.Item name="radio-group" label="Giới tính">
                                        <Radio.Group name="gender" onChange={e => UserHandle(e)} defaultValue={crrData?.gender}>
                                            <Radio name="gender" value={"1"}>Nam</Radio>
                                            <Radio name="gender" value={"2"}>Nữ</Radio>
                                            <Radio name="gender" value={"3"}>Giới tính khác</Radio>
                                        </Radio.Group>
                                    </Form.Item>

                                    <Form.Item
                                        label="Ngày sinh"
                                        name="birthday"
                                    >
                                        <DatePicker className="form-control m-input"
                                            locale={viVN}
                                            defaultValue={crrData?.birthday ? moment(birthday, 'DD-MM-YYYY') : null}
                                            format={'DD-MM-YYYY'}
                                            onChange={e => onChangeBirthday(e)}
                                            placeholder="DD-MM-YYY"
                                        />
                                    </Form.Item>

                                    {/* <Form.Item
                                        label="Trạng thái"
                                        name="is_deleted"
                                    >
                                        <Switch defaultChecked={active} onChange={onChangeActive} />
                                    </Form.Item> */}

                                    <Form.Item
                                        label="Quyền"
                                        name="level_obj_id"

                                    >
                                        <Select
                                            // mode="multiple"
                                            // allowClear
                                            style={{ width: '100%' }}
                                            placeholder="Chọn quyền"
                                            defaultValue={[]}
                                            onChange={handleChangeSelect}
                                        >
                                            {listOptions}
                                        </Select>                                       
                                        </Form.Item>

                                </Form>
                                {/* <div className="row d-flex justify-content-end mr-1">
                                    <Button variant="accent" className={"m-loader--light m-loader--right "}
                                        // disabled={loading} 
                                        onClick={() => form.submit()}
                                    >Lưu</Button>
                                    </div> */}
                            </div>
                        </div>
                    </div>
                </div>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="accent" className={"m-loader--light m-loader--right "}
                    // disabled={loading} 
                    onClick={() => form.submit()}
                >Lưu</Button>
                <Button variant="secondary" onClick={onHide}>Đóng</Button>
            </Modal.Footer>
        </Modal>
    );
}

export default ModalUser;