import { UserOutlined } from '@ant-design/icons';
import { Avatar, Tooltip } from 'antd';
import axios from 'axios';
import Modaledit from '../Modal/ModalEdit';
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';

export default function ListItem() {

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

    const [loading, setLoading] = useState(true)

    const [dataSearch, setDataSearch] = useState("")

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

    const [token, setToken] = useState('');

    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]
            })
            setToken(decodeURIComponent(obj.token))
            setToken((obj.token))
        }
    }, [location])

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

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

    const onDelete = async (data) => {
        let dataPost = {
            obj_id: data._id,
            id: data.id,
            name: data.name,
            birthday: data.birthday,
            gender: data.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': token,
                },
                data: dataPost,
            })
            if (result.data.status === 10000) {
                swal({
                    icon: 'success',
                    title: 'Thành công',
                    text: 'Xoá thành công',
                    timer: 1500,
                    buttons: false,
                })
                getData(activePage)
            } else if (result.data.status === 10004) {
                swal("Thất bại", "Xoá thất bại!", "error");
            } else {
                swal("Thất bại", "Xoá thất bại!", "error");
            }
        } catch (error) {
            setLoading(false)
            console.log(error);
        }
    }

    const handlePageChange = (pageNumber) => {
        setActivePage(pageNumber)
        getData(pageNumber)
    }

    const getData = async (page) => {
        try {
            const result = await axios({
                method: 'POST',
                url: `${HOST}/api/famous_persons/search`,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    // 'Authorization': token
                },
                data: {
                    index: page,
                    item_per_page: itemsPerPage,
                    search_data: dataSearch
                },
            })
            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(1);
        }
    }

    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) {
            listImg = <img key={index} style={{ width: "80px", height: "80px" }} alt="" src={`${value.sample_images.length > 0 && value.image_host + 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>{gender}</td>
                <td>{value.birthday !== "" ? momment(value.birthday).format("DD-MM-YYYY") : ""}</td>
                <td>
                    <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>
                    <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)
        getData(activePage)
    }

    const reset = async () => {
        setDataSearch('')
        getData(1)
    }

    return (
        <div>
            {showModal && <Modaledit data={dataEdit} onHide={onCloseModal} show={showModal} />}
            <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="m-portlet__head-text">
                                Danh sách người nổi tiếng
                            </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) => {
                                        setDataSearch(e.target.value)
                                    }}
                                    value={dataSearch}
                                    id="inputSearch" className="form-control m-input"
                                    placeholder="Họ tên..."
                                    data-col-index={0}
                                />
                            </div>
                            <div className="pl-3">
                                <button
                                    onClick={() => {
                                        setActivePage(1)
                                        getData(1)
                                    }}
                                    className="btn btn-accent m-btn m-btn--icon" id="m_search">
                                    <span>
                                        <i className="la la-search" />
                                        <span>Tìm kiếm</span>
                                    </span>
                                </button>
                            </div>
                            <div className="pl-3">
                                <button
                                    onClick={() => {
                                        setDataSearch("")
                                        setActivePage(1)
                                        getData(1)
                                    }}
                                    className="btn btn-secondary m-btn m-btn--icon" id="m_reset">
                                    <span>
                                        <i className="la la-rotate-left" />
                                        <span>Tải lại</span>
                                    </span>
                                </button>
                            </div>
                        </div>
                        <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- table-bordered table-hover table-checkable" id="m_table_1">
                        <thead>
                            <tr>
                                <th>Ảnh</th>
                                <th>Họ tên</th>
                                <th>Giới tính</th>
                                <th>Ngày sinh</th>
                                <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>
    )
}