import { UserOutlined } from '@ant-design/icons';
import { Avatar, Tooltip } from 'antd';
import axios from 'axios';
import ModalEditLabel from '../Modal/ModaEditLabel';
import momment from 'moment';
import React, { useEffect, useState } from 'react';
import Pagination from "react-js-pagination";
import { PulseLoader } from 'react-spinners';
import { HOST } from '../../config/index';
import swal from 'sweetalert';
import { useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Store from '../../store';

const initialDataPost = {
    index: 1,
    item_per_page: 5,
    search_data: "",
    person_type: 4,
}

export default function LabelImage() {

    const [data, setData] = useState(null)
    const [showModal, setShowModal] = useState(false)
    const [dataEdit, setDataEdit] = useState(null)

    const [loading, setLoading] = useState(true)

    const token = useSelector(state => state.isLogin.access_token);
    const dataRole = useSelector(state => state.role.role);

    console.log(token)

    const [activePage, setActivePage] = useState(1)
    const [totalItems, setTotalItems] = useState(0)

    const [dataPost, setDataPost] = useState(initialDataPost)
    const itemsPerPage = 5


    const location = useLocation();

    useEffect(() => {
        if (location.search) {
            let path = location.search.replace('?', '').split('&');
            let obj = {}
            path.forEach(value => {
                let arr = value.split('=');
                obj[arr[0]] = arr[1]
            })
        }
    }, [location])

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

    const onClickEdit = (data) => {
        setDataEdit(data)
        setShowModal(true)
    }

    const onDelete = async (value) => {
        let dataDel = {
            obj_id: value._id,
            id: value.id,
            name: value.name,
            birthday: value.birthday,
            gender: value.gender,
            is_deleted : 1 
        }
        try {
            const result = await axios({
                method: 'POST',
                url: `${HOST}/api/famous_persons/insert_or_update`,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': Store.getState().isLogin.access_token,
                    // 'Authorization': token,
                },
                data: dataDel,
            })
            if (result.data.status === 10000) {
                if (data.length === 1) {
                    setActivePage(activePage - 1)
                    setDataPost({ ...dataPost, index: activePage - 1 })
                }
                swal({
                    icon: 'success',
                    title: 'Thành công',
                    text: 'Xoá thành công',
                    timer: 1500,
                    buttons: false,
                })
                getData(dataPost)
            } else {
                swal("Thất bại", "Xoá thất bại!", "error");
            }
        } catch (error) {
            setLoading(false)
            console.log(error);
        }
    }

    const handlePageChange = (pageNumber) => {
        setActivePage(pageNumber);
        const data = {
            ...dataPost,
            index: pageNumber,
        }
        getData(data);
    }

    const getData = async (data) => {
        try {
            const result = await axios({
                method: 'POST',
                url: `${HOST}/api/famous_persons/search`,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': Store.getState().isLogin.access_token,
                    // 'Authorization': token
                },
                data: data ? data : dataPost,
            })
            if (result.data.status === 10000) {
                setData(result.data.data)
                setTotalItems(result.data.count)
                setLoading(false)
            }
        } catch (error) {
            setLoading(false)
            console.log(error);
        }
    }

    const handleOnKeyDown = e => {
        if (e.key === 'Enter') {
            setActivePage(1)
            getData(dataPost);
        }
    }

    const tableRows = (dataAll) => dataAll.map((value, index) => {
        var gender = ""
        if (value.gender === "1") {
            gender = "Nam"
        } else if (value.gender === "2") {
            gender = "Nữ"
        } else if (value.gender === "3") {
            gender = "Giới tính khác"
        } else {
            gender = ""
        }

        var listImg
        if (value.sample_images.length > 0) {
            let getDateImg = value.sample_images[0].split("_")
            let dataImg = getDateImg.length > 0 && getDateImg[1].slice(0,6)
            listImg = <img key={index} style={{ width: "80px", height: "80px" }} alt="" src={`${value.sample_images.length > 0 && value.image_host +dataImg+ "/" +value.sample_images[0]}`} />
        } else {
            listImg = <Avatar shape="square" size={80} icon={<UserOutlined />} />
        }

        return (
            <tr key={index}>
                <td>{listImg}</td>
                <td>{value.name}</td>
                <td>{value.id}</td>
                <td>{gender}</td>
                <td>{value.birthday !== "" ? momment(value.birthday).format("DD-MM-YYYY") : ""}</td>
                {(dataRole?.indexOf('person:edit') === -1 && dataRole?.indexOf('person:delete') === -1) ? "" :
                <td>
                {dataRole?.indexOf('person:edit') !== -1 ? 
                    <Tooltip placement="top" title={"Sửa"}>
                        <button
                            onClick={() => onClickEdit(value)}
                            className="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for="Edit" >
                            <i className="la la-edit" />
                        </button>
                    </Tooltip>
                        : ""}
                    {dataRole?.indexOf('person:delete') !== -1 ? 
                    <Tooltip placement="top" title={"Xoá"}>
                        <button
                            onClick={f => {
                                f.preventDefault();
                                swal({
                                    // title: "Are you sure?",
                                    text: "Bạn có chắc muốn xoá " + value.name,
                                    icon: "warning",
                                    buttons: ["Huỷ", "Xoá"],
                                    dangerMode: true,
                                })
                                    .then(willDelete => {
                                        if (willDelete) {
                                            onDelete(value);
                                        }
                                    });
                            }}
                            className="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" data-tip data-for="Edit" >
                            <i className="la la-trash" />
                        </button>
                    </Tooltip>
                        : ""}
                </td>}
            </tr>
        )
    })


    const onCloseModal = () => {
        setShowModal(false)
        // setActivePage(activePage)
        const data = {
            ...dataPost,
            index: activePage,
        }
        getData(data);
    }

    const reset = () => {
        setActivePage(1)
        setDataPost({...dataPost, search_data: ""})
        getData(initialDataPost)
    }

    return (
        <>
            {showModal && <ModalEditLabel data={dataEdit} onHide={onCloseModal} show={showModal} />}
            <div className="m-grid__item m-grid__item--fluid m-wrapper p-2" id="capture_form">
                <div className="m-content p-2">
            <div className="m-portlet m-portlet--mobile pb-3">
                <div className="m-portlet__head">
                    <div className="m-portlet__head-caption">
                        <div className="m-portlet__head-title">
                            <h3 className="font-family-text">
                                Gán nhãn
                            </h3>
                        </div>
                    </div>
                </div>
                <div className="m-portlet__body pt-2">
                    <div className="row pl-4">
                        <div className="row p-3 col-xl-11">
                            <div className="col-lg-2 p-0 m--margin-bottom-10-tablet-and-mobile">
                                <input type="text"
                                    onKeyPress={(e) => handleOnKeyDown(e)}
                                    onChange={(e) => {
                                        setDataPost({ ...dataPost, search_data: e.target.value })
                                    }}
                                    value={dataPost.search_data}
                                    id="inputSearch" className="font-family-text form-control m-input"
                                    placeholder="Họ tên..."
                                    data-col-index={0}
                                />
                            </div>
                            <div className="pl-3">
                                <button
                                    onClick={() => {
                                        setActivePage(1)
                                        getData(dataPost)
                                    }}
                                    className="btn btn-accent m-btn m-btn--icon" id="m_search">
                                    <span>
                                        <i className="la la-search" />
                                        <span className='font-family-text'>Tìm kiếm</span>
                                    </span>
                                </button>
                            </div>
                            <div className="pl-3">
                                <button
                                    onClick={() => {
                                        reset()
                                    }}
                                    className="btn btn-secondary m-btn m-btn--icon" id="m_reset">
                                    <span>
                                        <i className="la la-rotate-left" />
                                        <span className='font-family-text'>Tải lại</span>
                                    </span>
                                </button>
                            </div>
                        </div>
                        {dataRole?.indexOf('person:edit') !== -1 ?
                        <div className="m-portlet__head-tools col-xl-1 d-flex align-items-center">
                            <button
                                onClick={(e) => {
                                    let dataEdit = {
                                        obj_id: "",
                                        id: "",
                                        name: "",
                                        birthday: "",
                                        gender: "",
                                        sample_images: [],
                                        image_host: ""
                                    };
                                    setDataEdit(dataEdit)
                                    setShowModal(true)
                                }}
                                className="btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air">
                                <span>
                                    <i className="la la-plus" />
                                    <span>Thêm mới</span>
                                </span>
                            </button>
                        </div> : "" }
                    </div>
                    {/*begin: Datatable */}
                    <table className="table table-striped- font-family-text color table-bordered table-hover table-checkable" id="m_table_1">
                        <thead>
                            <tr>
                                <th>Ảnh</th>
                                <th>Họ tên</th>
                                <th>FacebookID</th>
                                <th>Giới tính</th>
                                <th>Ngày sinh</th>
                                {(dataRole?.indexOf('person:edit') === -1 && dataRole?.indexOf('person:delete') === -1) ? "" : <th>Thao tác</th>}
                            </tr>
                        </thead>
                        <tbody>{data && tableRows(data)}</tbody>
                    </table>
                    <PulseLoader
                        // css={override}
                        sizeUnit={"px"}
                        size={12}
                        margin={'2px'}
                        color={'#36D7B7'}
                        loading={loading}
                    />
                    <Pagination
                        prevPageText='Trang trước'
                        nextPageText='Trang sau'
                        firstPageText='Trang đầu'
                        lastPageText='Trang cuối'
                        activePage={activePage}
                        itemsCountPerPage={itemsPerPage}
                        totalItemsCount={totalItems}
                        pageRangeDisplayed={5}
                        onChange={handlePageChange}
                    />
                </div>
            </div>
            </div>
           </div>
        </>
    )
}