import matchSorter from 'match-sorter';
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import ReactTable from "react-table";
import 'react-table/react-table.css';
import { Badge, Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
import AlphabeticalList from '../../../components/AlphabeticalList/AlphabeticalList';
import { connect } from 'react-redux';
import { showModal, hideModal, categoriesLowGetRequest, customFieldsGetByCatRequest, categoriesLowDelRequest } from '../../../redux/actions';

class CategoriesLow extends Component {
    constructor(props) {
        super(props);

        if(sessionStorage.getItem(this.props.location.pathname)) {
            const local = JSON.parse(sessionStorage.getItem(this.props.location.pathname));
            this.state = {
                filtered: local.filtered || [],
                pageIndex: local.pageIndex || 0,
                pageSize: local.pageSize || 15,
                sorted: local.sorted || []
            }
        }
    }

    onFilteredChangeCustom = (value, accessor) => {
    let filtered = this.state.filtered || [];
    let insertNewFilter = 1;

    if (filtered.length) {
      filtered.forEach((filter, i) => {
        if (filter["id"] === accessor) {
          if (value === "" || !value.length) filtered.splice(i, 1);
          else filter["value"] = value;

          insertNewFilter = 0;
        }
      });
    }

    if (insertNewFilter) {
      filtered.push({ id: accessor, value: value });
    }

    this.setState({ filtered: filtered, pageIndex: 0});
    };

    onPageChange = (pageIndex) => {
        this.setState({ pageIndex });
    }

    onPageSizeChange = (pageSize, pageIndex) => {
        this.setState({
            pageSize,
            pageIndex
        })
    }

    onSortedChange = (sorted, column) => {
        this.setState({ sorted });
    }

    deleteData = (id) => {
        this.props.categoriesLowDelRequest(id);
        this.props.hideModal();
    }

    setCustomFields = (id, description) => {
        this.customFieldsGetByCatRequest(id);

        this.props.showModal({
            title: `Set custom fields for ${description}`,
            message: <AlphabeticalList data={this.props.customFieldsByCat} onSelect={(id) => this.selectElement(id)} />,
            size: 'modal-xl',
            cancelAction: null,
            confirmAction: this.saveSelection
        })
    }

    componentDidMount() {
        this.props.categoriesLowRequest();
    }

    componentWillUnmount() {
        sessionStorage.setItem(
            this.props.location.pathname,
            JSON.stringify({
                filtered: this.state.filtered,
                pageIndex: this.state.pageIndex,
                pageSize: this.state.pageSize,
                sorted: this.state.sorted
            })
        );
    }

    render () {
        const data = this.props.categoriesLow;

        const columns = [
            {
                Header: 'High Category',
                columns: [
                    {
                        Header: 'Code',
                        accessor: 'cd_categories1',
                        maxWidth: 50,
                        filterMethod: (filter, rows) =>
                                                    matchSorter(rows, filter.value, { keys: ["cd_categories1"] }),
                        filterAll: true
                    },
                    {
                        Header: 'Description',
                        accessor: 'categories1_desc',
                        width: 250,
                        filterMethod: (filter, rows) =>
                                                matchSorter(rows, filter.value, { keys: ["categories1_desc"] }),
                        filterAll: true,
                    }
                ]
            },
            {
                Header: 'Mid Category',
                columns: [
                    {
                        Header: 'Code',
                        accessor: 'cd_categories2',
                        maxWidth: 50,
                        filterMethod: (filter, rows) =>
                                                matchSorter(rows, filter.value, { keys: ["cd_categories2"] }),
                        filterAll: true,
                    },
                    {
                        Header: 'Description',
                        accessor: 'categories2_desc',
                        width: 250,
                        filterMethod: (filter, rows) =>
                                                matchSorter(rows, filter.value, { keys: ["categories2_desc"] }),
                        filterAll: true,
                    }
                ]
            },
            {
                Header: 'Low Category',
                columns: [
                    {
                        Header: 'Code',
                        accessor: 'cd_categories3',
                        maxWidth: 50,
                        filterMethod: (filter, rows) =>
                                                matchSorter(rows, filter.value, { keys: ["cd_categories3"] }),
                        filterAll: true,
                        Cell: row => (
                            <Link to={`/configuration/categorieslow/${row.original.id}`}>
                                {row.value}
                            </Link>
                        )
                    },
                    {
                        Header: 'Description',
                        id: "description",
                        width: 300,
                        accessor: d => d.description,
                        filterMethod: (filter, rows) =>
                                                matchSorter(rows, filter.value, { keys: ["description"] }),
                        filterAll: true
                    },
                ]
            },
            {
                Header: 'Category Browse',
                accessor: 'categoriesbrowse_desc',
                width: 300,
                filterMethod: (filter, rows) =>
                                                matchSorter(rows, filter.value, { keys: ["categoriesbrowse_desc"] }),
                filterAll: true,
            },
            {
                Header: '',
                columns: [
                    {
                        filterable: false,
                        Cell: row => (
                            <span>
                                <Button color="danger" size="sm" onClick={() => {
                                        this.props.showModal({
                                            title: 'Confirm Operation',
                                            message: `Are you sure you want to delete this element: ${row.original.cd_categories3} - ${row.original.description}?`,
                                            size: 'modal-lg',
                                            cancelAction: null,
                                            confirmAction: () => this.deleteData(row.original.id)
                                        })
                                }}><i className="fa fa-remove"></i> Delete</Button> {' '}

                                <Button color="info" size="sm" onClick={() => {
                                                                                                                                this.props.customFieldsGetByCatRequest(row.original.id);

                                                                                                                                this.props.showModal({
                                                                                                                                    title: `Set custom fields for ${row.original.description}`,
                                                                                                                                    message: <AlphabeticalList data={this.props.customFieldsByCat} onSelect={(id) => this.selectElement(row.original.id)} />,
                                                                                                                                    size: 'modal-xl',
                                                                                                                                    cancelAction: null,
                                                                                                                                    confirmAction: this.saveSelection
                                                                                                                                })
                                                                                                                            }
                                                                                                                }>
                                    <i className="fa fa-address-book"></i> Set custom fields  <Badge color="warning" pill>{row.original.CustomFieldCount}</Badge>
                                </Button>
                            </span>
                        )
                    }
                ]
            }
        ];

        return (
            <div className="animated fadeIn">
                <Row>
                    <Col xs="12">
                        <Card>
                            <CardHeader>
                                <strong>Categories (LOW)</strong>
                                <small> manage</small>
                                <div className="card-header-actions">
                                    <Button type="submit" size="sm" color="primary" onClick={() => {
                                                this.props.history.push('/configuration/categorieslow/new');
                                            }}><i className="fa fa-dot-circle-o"></i> New</Button>{' '}
                                    <Button type="submit" size="sm" color="secondary" onClick={() => {

                                        }}><i className="fa fa-print"></i> Print</Button>
                </div>
                            </CardHeader>
                            <CardBody>
                                <ReactTable
                                    data={data}
                                    columns={columns}
                                    filterable
                                    filtered={this.state.filtered}
                                    page={this.state.pageIndex}
                                    onPageChange={pageIndex => {
                                        this.onPageChange(pageIndex);
                                    }}
                                onPageSizeChange={(pageSize, pageIndex) => {
                                        this.onPageSizeChange(pageSize, pageIndex);
                                    }}
                                onSortedChange={(sorted, column) => {
                                        this.onSortedChange(sorted, column);
                                    }}
                                    onFilteredChange={(filtered, column, value) => {
                                        this.onFilteredChangeCustom(value, column.id || column.accessor);
                                    }}
                                    sorted={this.state.sorted}
                                    pageSizeOptions={[15,25,50,100]}
                                    defaultPageSize={this.state.pageSize}
                                    loader={false}
                                    resizable={true}
                                    className="-striped -highlight"
                                />

                            </CardBody>
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    categoriesLow: state.categoriesLow.list,
    customFieldsByCat: state.customFields.byCategory,
    errorCustomField: state.customFields.error
});

const mapDispatchToProps = dispatch => ({
    categoriesLowRequest: () => dispatch(categoriesLowGetRequest()),
    categoriesLowDelRequest: (id) => dispatch(categoriesLowDelRequest(id)),
    customFieldsGetByCatRequest: (categoryId) => dispatch(customFieldsGetByCatRequest(categoryId)),
    showModal: (modalProps) => dispatch(showModal(modalProps)),
    hideModal: () => dispatch(hideModal())
});

export default connect(mapStateToProps, mapDispatchToProps)(CategoriesLow);