import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import swal from 'sweetalert';
import ModalRole from "../Modal/ModalRole";
import { PulseLoader } from 'react-spinners';
import Pagination from "react-js-pagination";
import $ from 'jquery';
import { HOST } from '../../config/index';


class Role extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalRole: false,
            listRole: [],
            listStaff: [],
            crrDatas: [],
            activePage: 1,
            offset: 0,
            crrRole: {
                name: "",
                description: ""
            },
        };
        this.itemsPerPage = 10;
    }

    componentDidMount() {
        this.getData();
    }
    

    getData = () => {
        this.getRole()
    }

    getRole = () => {
        fetch(`${HOST}/api/levels/company/1`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                // 'Authorization': token
            },
        }).then((response) => {
            return response.json()
        }).then((data) => {
            if (data.status === 10000) {
                this.setState({
                    listRole: data.data
                });
                this.FilterRole(this.state.activePage)
            }
        })
    }

    FilterRole(activePage) {
        const { listRole } = this.state;
        const offset = (activePage - 1) * this.itemsPerPage;
        const crrDatas = listRole.slice(offset, offset + this.itemsPerPage);
        console.log(crrDatas)
        this.setState({
            crrDatas,
            offset: offset
        })
    }

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

    }



    DeleteRole = async (Role) => {
        if (Role.is_default === 1) {
            swal("Cảnh báo", "Bạn không được xóa quyền mặc định", "warning");
            return;
        }
        let data = await fetch(`${HOST}/api/role/delete`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 'Authorization': token,
            },
            body: JSON.stringify({
                'id': Role.id
            })
        }).then((response) => {
            return response.json()
        });
        if (data.status === 10000) {
            swal("Thành công", "Bạn đã xóa thành công!", "success", {
                buttons: false,
                timer: 1500,
            });
            this.getRole();
        }
        else {
            swal("Lỗi", "Xóa thất bại!", "error");
        }

    }

    modalClose = () => {
        this.setState({
            modalRole: false,
        });
        this.getRole();
    }

    render() {
        if (this.state.isLogin === false) {
            return (
                <Redirect to={'/login'} />
            )
        }

        let bulletedRole = this.state.crrDatas.map((e, i) => {
            console.log(e)
            var is_default = ""
            if (e.is_default === 1) {
                is_default = " (Default)"
            }
            return (
                <tr key={(i + 1)}>
                    <td>{(i + this.state.offset + 1)}</td>
                    <td>{e.name}</td>
                    <td>
                        {
                            e.active === 0
                                ?
                                <span className="m-badge  m-badge--secondary m-badge--wide">Inactive {is_default}</span>
                                :
                                <span className="m-badge  m-badge--accent m-badge--wide">Active {is_default}</span>
                        }

                    </td>
                    <td>
                        <button onClick={(e) => {
                            var data = this.state.crrDatas
                            var dataRole = {
                                id: data[i]._id,
                                name: data[i].name,
                                roles: data[i].roles,
                                is_default: data[i].is_default,
                            };
                            this.setState({
                                crrRole: dataRole,
                                modalRole: true,
                            });


                        }} 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>
                        {/* <ReactTooltip id='Edit' type='dark' effect='solid'>
                            <span>{language[this.props.indexLanguage].tooltip.open_edit}</span>
                        </ReactTooltip> */}


                        <button 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='Delete'
                            onClick={v => {
                                v.preventDefault();
                                swal({
                                    title: "Bạn có chắc chắn?",
                                    text: "Bạn có chắc chắn muốn xóa quyền" + e.name,
                                    icon: "warning",
                                    buttons: true,
                                    dangerMode: true,
                                })
                                    .then(willDelete => {
                                        if (willDelete) {
                                            this.DeleteRole(e);
                                        }
                                    });

                            }}
                        ><i className="la la-trash"></i></button>
                        {/* <ReactTooltip id='Delete' type='dark' effect='solid'>
                            <span>{language[this.props.indexLanguage].tooltip.open_delete}</span>
                        </ReactTooltip> */}
                    </td>
                </tr>
            )
        });

        var pageRangeDisplayed = 1;
        if ($(window).width() < 768) {
            pageRangeDisplayed = 3
        } else {
            pageRangeDisplayed = 5
        }

        return (
            <div className="m-grid__item m-grid__item--fluid m-wrapper">
                <div className="m-content p-2">
                    <div className="m-portlet m-portlet--tab mb-0">
                        <div className="m-portlet__head p-3">
                            <div className="m-portlet__head-caption pl-3">
                                <div className="m-portlet__head-title">
                                    <h3 className="m-portlet__head-text">
                                        Quyền
                                    </h3>
                                </div>
                            </div>
                            <div className="m-portlet__head-tools pr-3">
                                <ul className="m-portlet__nav">
                                    <li className="m-portlet__nav-item">
                                        <button onClick={(e) => {
                                            this.setState({
                                                crrRole: {
                                                    name: "",
                                                    active: 1,
                                                    // id_company: this.state.box_engine_cf.idCompany,
                                                    roles: [],
                                                    is_default: 0,
                                                    HOST: this.state.crrApi2
                                                },
                                                modalRole: 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>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className="m-portlet__body m-portlet__body--no-padding">
                            <div className="row m-row--no-padding m-row--col-separator-xl">
                                <div className="col-xl-12">
                                    <div className="m-widget1 col-xl-8 mx-auto">
                                        <div className="table-responsive text-nowrap">
                                            <table className="table table-bordered table-hover table-checkable dataTable no-footer dtr-inline collapsed">
                                                <thead>
                                                    <tr>
                                                        <th style={{ 'verticalAlign': 'middle', 'width': '100px' }}>STT</th>
                                                        <th style={{ 'verticalAlign': 'middle' }}>Tên</th>
                                                        <th style={{ 'verticalAlign': 'middle', 'width': '200px' }}>Trạng thái</th>
                                                        <th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>Thao tác</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {bulletedRole}
                                                </tbody>
                                            </table>
                                            {/* <PulseLoader
                                                css={override}
                                                sizeUnit={"px"}
                                                size={12}
                                                margin={'2px'}
                                                color={'#36D7B7'}
                                                loading={this.state.loading}
                                            /> */}

                                            <ModalRole
                                                data={this.state.crrRole}
                                                show={this.state.modalRole}
                                                onHide={this.modalClose}
                                            />
                                        </div>
                                        {/* <span>
                                            Showing {this.state.showFirst} to {this.state.showLast} of {this.state.totalLength} entries
                                        </span> */}
                                        <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.listRole.length}
                                            pageRangeDisplayed={pageRangeDisplayed}
                                            onChange={this.handlePageChange}
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Role;