import { InboxOutlined } from '@ant-design/icons';
import { Upload } from 'antd';
import axios from 'axios';
import 'moment/locale/vi';
import React, { useState } from 'react';
import { Modal } from 'react-bootstrap';
import Dropzone from "react-dropzone";
import LoadingOverlay from 'react-loading-overlay';
import { PulseLoader } from 'react-spinners';
import swal from 'sweetalert';
import { HOST } from '../../config/index';

const { Dragger } = Upload;


const ModalUpload = (props) => {
    const { show, onHide } = props;
    const [loading, setLoading] = useState(false);

    const handleDrop = async acceptedFiles => {
        let formData = new FormData()
  
        const fileObjects = acceptedFiles.map(file => {
        formData.append('files', file, file.name)
        })

        setLoading(true)
        try {
            let result = await axios
            .post(`${HOST}/api/files_face_import`, formData, {
                headers: {
                    "X-Requested-With": "XMLHttpRequest",
                    "Content-Type": "application/x-www-form-urlencoded",
                    "Authorization": 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJjbGFzc2lmeS9sb2dpbiJdLCJleHAiOjE2NDE5NzQ5NjV9.2F2PAUKjpfjPJKzgvzgCDtyBuTXDRl86EnJJGdYgWTM'
                }
            })
            console.log(result)
            if (result.data.status === 10000) {
                setLoading(false)
                swal({
                    text: "Tải ảnh lên thành công",
                    icon: "success",
                    // buttons: ["Thử lại", "Huỷ"],
                })
                    .then(willTry => {
                        if (willTry) {
                            onHide()
                        }
                    })
            } else if (result.data.status === 10002) {
                swal("Thất bại", "Lỗi hệ thống!", "error")
            } else if (result.data.status === 10003) {
                swal("Thất bại", "Không có quyền!", "error")
            }
        } catch (error) {
            console.log(error)
            swal("Thất bại", "Tải ảnh lên thất bại!", "error")
        }
    }



    return (
        <Modal
            {...props}
            animation={false}
            size="md"
            backdrop={loading ? 'static' : true}
            keyboard={false}
            dialogClassName={`${window.innerWidth >= 1920 ? "modal-size-res" : "modal-size"}`}
            aria-labelledby="contained-modal-title-vcenter"
        >
            <LoadingOverlay
                active={loading}
                spinner={<PulseLoader
                    sizeUnit={"px"}
                    size={12}
                    margin={'2px'}
                    color={'#36D7B7'}
                    loading={true}
                />}
                styles={{
                    overlay: (base) => ({
                        ...base,
                        background: 'rgba(0, 0, 0, 0.58)'
                    })
                }}

                className="col-xl-12 p-0"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">Tải ảnh lên
                    </Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <div className="Container-modal">
                        <Dropzone
                            onDrop={handleDrop}
                            accept="image/*"
                        // minSize={1024}
                        // maxSize={300000}
                        >
                            {({
                                getRootProps,
                                getInputProps,
                                isDragActive,
                                isDragAccept,
                                isDragReject
                            }) => {
                                const additionalClass = isDragAccept
                                    ? "accept"
                                    : isDragReject
                                        ? "reject"
                                        : "";

                                return (
                                    <div
                                        {...getRootProps({
                                            className: `dropzone ${additionalClass}`
                                        })}
                                    >
                                        <input {...getInputProps()} />
                                        <InboxOutlined style={{ fontSize: "50px" }} />
                                        <p>Kéo thả thư mục hình ảnh, hoặc chọn ảnh để nhập</p>
                                    </div>
                                );
                            }}
                        </Dropzone>
                    </div>

                </Modal.Body>
            </LoadingOverlay>

        </Modal>
    );
}

export default ModalUpload;