import React, { Component } from 'react';
import Column from '../../../components/common/columns';
import { Paginated } from '../../../services/Paginated';
import DomainsTable from './components/domainsTable';
import domainsService, { GetDomain } from './serrvices/domainsService';
import Button, { ButtonType } from '../../../components/common/Button';
import Loading from '../../../components/common/Loading';
import Permission from '../../../components/common/Permission';

interface DomainsState{
    loaded: boolean;
    pagedData : Paginated<GetDomain>,
    sortColumn : Column<GetDomain>,
    filters: Map<string, string>;
}

class Domains extends Component< any, any, DomainsState> {
    state = {
        loaded : false,
        pagedData : { page: 1,
            pageSize : 10,
            count: 0,
            totalPages: 1,
            data: [] },
        sortColumn: { key: "name", label: "Name", order: "asc" },
        filters: new Map<string, string>()
    }

    componentDidMount = async () => {
        const { page, pageSize } = this.state.pagedData;

        await this.changePage(page, pageSize);
    }

     changePage = async(page: number, pageSize : number) =>{
        const { sortColumn, filters } = this.state;
        
         const pagedData = await domainsService.getDomains(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
         if (pagedData) {
             this.setState({ loaded: true, pagedData });
         }
         else {
             this.setState({ loaded: false });
         }
    }

    onSort = async(sortColumn : Column<GetDomain>) => {
        const {page, pageSize } = this.state.pagedData;
        const { filters } = this.state;
        const pagedData = await domainsService.getDomains(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
        if (pagedData) {
            this.setState({ loaded: true, pagedData, sortColumn });
        }
        else {
            this.setState({ loaded: false });
        }
    }

    onSearch = async ( name: string, value: string) => {
        const {page, pageSize } = this.state.pagedData;
        const {sortColumn, filters } = this.state;
        filters.set(name, value);

        const pagedData = await domainsService.getDomains(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
        if (pagedData) {
            this.setState({ loaded: true, filters, pagedData });
        }
        else {
            this.setState({ loaded: false });
        }
    };

    onDelete = async ( keyValue? : GetDomain) => {
        const response = await domainsService.deleteDomain( keyValue?.id, keyValue?.guid);
        if (response) {
            this.componentDidMount();
        }
    }

    render(): JSX.Element {
        const { loaded, pagedData, sortColumn } = this.state;

        return (
            <Loading loaded={loaded}>
                <Permission privilegeKey="AddDomain">
                <div>
                    <Button buttonType={ButtonType.primary} to="add">Add</Button>
                    </div>
                </Permission>
                <hr/>
                <DomainsTable data={pagedData} sortColumn={sortColumn} onChangePage={this.changePage} onSort={this.onSort} onSearch={this.onSearch} onDelete={this.onDelete}/>
            </Loading>
        );
    }
};

export default Domains;