import React, { Component } from "react";
import { HOST } from '../../config';
import swal from 'sweetalert';
import { Redirect } from 'react-router-dom';
import Pagination from "react-js-pagination";
import $ from 'jquery';
import { PulseLoader } from 'react-spinners';
import Modalupload from '../Modal/ModalUpload';
import ModalEditImg from '../Modal/ModalEditImg';
import axios from 'axios';
import { Avatar, Tooltip, Image } from 'antd';
import {UserOutlined} from '@ant-design/icons';
import momment from 'moment';
import Select from "react-select";
import Store from '../../store';
class ImportImage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            listImgImport: [],
            crrImg: [],
            activePage: 1,
            offset: 0,
            showFirst: 0,
            showLast: 0,
            totalLength: 0,
            loading: true,
            count: 0,
            modalShow: false,
            dataEdit: null,
            modalUploadShow: false,
            dataSearch: "",
            optionSelect: [{value: 1, label:"Facebook"}, {value: 2, label: "Tải lên"}],
            valueSelected: {value: 2, label:"Tải lên"},
            dataRole: Store.getState().role.role,
        }
        Store.subscribe(() => {
            this.setState({
                dataRole: Store.getState().role.role,
            }, () => {

            });
        });
        this.itemsPerPage = 5;
    }

    componentDidMount() {
        this.getListImg(1);
    }


    getListImg = async (page) => {
        this.setState({ loading: true });
        try {
            const result = await axios({
                method: 'POST',
                url: `${HOST}/api/face_images/search`,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    // 'Authorization': token
                },
                data: {
                    index: page,
                    item_per_page: this.itemsPerPage,
                    search_data: this.state.dataSearch,
                    import_type: this.state.valueSelected.value
                },
            })

            if (result.data.status === 10000) {
                this.setState({
                    listImgImport: result.data.data,
                    totalLength: result.data.count,
                }, () => {
                    this.FilterItem(this.state.activePage)
                })
            }
        } catch (error) {
            this.setState({
            })
            console.log(error);
        }
        this.setState({ loading: false });
    }



    modalClose = () => {
        this.setState({
            modalShow: false,
        });
        this.getListImg(this.state.activePage);
    }

    modalUploadClose = () => {
        this.setState({
            modalUploadShow: false,
        });
        this.getListImg(this.state.activePage);
    }

    FilterItem = (activePage) => {
        const offset = (activePage - 1) * this.itemsPerPage;
        this.setState({
            offset: offset
        })
    }

    onClickEdit = (value) => {
        this.setState({
            modalShow: true,
            dataEdit: value
        })
    }

    handlePageChange = (pageNumber) => {
        this.setState({
            activePage: pageNumber
        }, () => {
            this.getListImg(pageNumber);
        })
    }

    onDelete = async (img) => {
        let data = await fetch(`${HOST}/api/face_images/delete`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                // 'Authorization': token
            },
            body: JSON.stringify({ 'image_obj_id_list': [img._id] })
        }).then((response) => {
            return response.json()
        });

        if (data.status === 10000) {
            var { activePage } = this.state
            if (this.state.listImgImport.length === 1) {
                activePage = activePage - 1
            }
            this.setState({
                activePage: activePage
            })
            swal("Thành công", "Xoá ảnh thành công", "success")
            this.getListImg(this.state.activePage);
        }
        else {
            swal("Thất bại", "Xoá ảnh thất bại", "error");
        }
    }

    handleOnKeyDown = e => {
        if (e.key === 'Enter') {
            this.getListImg(1)
        }
    }

    reset = () => {
        this.setState({
            activePage: 1,
            dataSearch: "",
            valueSelected: {value: 2, label:"Tải lên"},
        }, () => {
            this.getListImg(1);
        })
    }

    changeHandleFilter = (e) => {
        this.setState({
            valueSelected: e,
            activePage: 1
        }, () => {
            this.getListImg(1);
        });
    }

    render() {
        // if (this.state.isLogin == false) {
        //     return (
        //         <Redirect to={'/login'} />
        //     )
        // }
        let bulletedListImg = this.state.listImgImport.map((value, index) => {
  
        var listImg
        listImg = <Image style={{ width: "80px", height: "auto", objectFit: "contain"}} alt="" src={`${value.image_host}`} />


        return (
            <tr key={index}>
                <td>{(index + this.state.offset + 1)}</td>
                <td>{listImg}</td>
                <td>{value.origin_name}</td>
                <td>{value.import_type === 1 ? "Facebook" : "Tải lên"}</td>
                <td>{momment(value.created_time).format("DD-MM-YYYY")}</td>
                {this.state.dataRole?.indexOf('import:edit') === -1 && this.state.dataRole?.indexOf('import:delete') === -1 ? "" : 
                <td>
                {this.state.dataRole?.indexOf('import:edit') !== -1 ? 
                    <Tooltip placement="top" title={"Sửa"}>
                        <button
                            onClick={() => this.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> : ""}
                    {this.state.dataRole?.indexOf('import: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á ảnh này",
                                    icon: "warning",
                                    buttons: ["Huỷ", "Xoá"],
                                    dangerMode: true,
                                })
                                    .then(willDelete => {
                                        if (willDelete) {
                                            this.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>
        )
        });

        return (
           <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">
                                Kho ảnh
                            </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) => this.handleOnKeyDown(e)}
                                    onChange={(e) => {
                                        this.setState({
                                            dataSearch: e.target.value
                                        })
                                    }}
                                    value={this.state.dataSearch}
                                    id="inputSearch" className="form-control m-input"
                                    placeholder="Tên ảnh..."
                                    data-col-index={0}
                                />
                            </div>
                            <div className="form-group m-form__group col-xl-2">
                                {process.env.REACT_APP_SOURCE_IMG === "1" ?
                                    <Select
                                        placeholder={'Loại ảnh'}
                                        value={this.state.valueSelected}
                                        onChange={this.changeHandleFilter}
                                        options={this.state.optionSelect}
                                    /> : ""
                                }
                                </div>
                            <div className="pl-3">
                                <button
                                    onClick={() => {
                                        this.getListImg(1);
                                        this.setState({
                                            activePage: 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={() => {
                                       this.reset()
                                    }}
                                    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>
                        {this.state.dataRole?.indexOf('import:upload') !== -1 ? 
                        <div className="m-portlet__head-tools col-xl-1 d-flex align-items-center">
                            <button
                                onClick={(e) => {
                                    this.setState({
                                        modalUploadShow: 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>Tải ảnh lên</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 style={{width: "50px"}}>STT</th>
                                <th>Ảnh</th>
                                <th>Tên ảnh</th>
                                <th>Loại ảnh</th>
                                <th>Ngày tải lên</th>
                                {this.state.dataRole?.indexOf('import:edit') === -1 && this.state.dataRole?.indexOf('import:delete') === -1 ? "" : <th>Thao tác</th>}
                            </tr>
                        </thead>
                        <tbody>{bulletedListImg}</tbody>
                    </table>
                    <Modalupload
                                show={this.state.modalUploadShow}
                                onHide={this.modalUploadClose}
                            />
                    <ModalEditImg
                                show={this.state.modalShow}
                                onHide={this.modalClose}
                                data={this.state.dataEdit}
                            />
                    <PulseLoader
                        // css={override}
                        sizeUnit={"px"}
                        size={12}
                        margin={'2px'}
                        color={'#36D7B7'}
                        loading={this.state.loading}
                    />
                    <Pagination
                        prevPageText='Trang trước'
                        nextPageText='Trang sau'
                        firstPageText='Trang đầu'
                        lastPageText='Trang cuối'
                        activePage={this.state.activePage}
                        itemsCountPerPage={this.itemsPerPage}
                        totalItemsCount={this.state.totalLength}
                        pageRangeDisplayed={5}
                        onChange={this.handlePageChange}
                    />
                    <div className="font-family-text">Tổng kết quả <strong>{this.state.totalLength}</strong></div>
                </div>
            </div>
        )
    }
}


export default ImportImage;