import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import { parse } from 'query-string';

import { filterCodeToUrl } from 'actions/filterCode';

import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import BackButton from 'ui/common/buttons/BackButton';
import PageTitle from 'ui/common/PageTitle';

interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
    title: string;
    tab?: string;
    pageCurrent: number;
    pageSize: number;
    pageSort?: string;
    pageDir?: string;
    filterCode?: string;
    filter: any;
    preFilter?: object;
    basePath: string;
    filterCodeToUrl: any;
}

class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps & any, any> {

    // SSR only
    protected static needs = [
    ];

    constructor(props) {
        super(props);
        this.state = {tab: '', filterCode: props.filterCode};
    }

    public componentDidMount() {
        // noop
    }

    public componentWillMount() {
        // noop
    }

    public componentWillUnmount() {
        // noop
    }

    public componentWillReceiveProps(nextProps) {
        // const {filterCodeToUrl} = this.props;
        // const paged = this.getPaged(nextProps);
        //
        // if (paged) {
        //     filterCodeToUrl(paged.filterCode);
        // }
    }

    public componentWillUpdate(nextProps, nextState) {
        // noop
    }

    public componentDidUpdate() {
        // noop
    }

    protected getPaged(props) {
        // switch (props.tab) {
        //     case 'descriptorlists': return props.descriptorLists;
        //     case 'descriptors': return props.descriptors;
        //     case 'datasets':
        // default: return props.datasets;
    // }
    }

    protected onPaginationChange = (page, results, sortBy, dir) => {
        const { history, location } = this.props;
        const params = new URLSearchParams(location.search);
        params.set('p', page);
        params.set('l', results);
        if (sortBy) {
            params.set('s', sortBy);
        } else {
            params.delete('s');
        }
        if (dir) {
            params.set('d', dir);
        } else {
            params.delete('d');
        }

        location.search = params.toString();
        history.push(location);
    }
}

class DP extends BaseMyDataPage<any> {

    constructor(props) {
        super(props);
    }

    public render() {
        const {title} = this.props;

        return (
            <div>
                <PageTitle title={ title }/>
                <ContentHeaderWithButton title={ title } buttons={ <BackButton defaultTarget="/dashboard" defaultBackText="BACK TO DASHBOARD" preferDefaultTarget="true" /> }/>
            </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({
    title: ownProps.route.extraProps.title || 'Data', // route-configured
    basePath: ownProps.route.extraProps.basePath, // route-configured
    preFilter: ownProps.route.extraProps.filter || {}, // route-configured
    tab: ownProps.match.params.tab || 'datasets', // current tab, or ownProps.location.pathname
    pageCurrent: +parse(ownProps.location.search).p || 0, // current page
    pageSize: +parse(ownProps.location.search).l || 20, // page size
    pageSort: parse(ownProps.location.search).s, // page sort
    pageDir: parse(ownProps.location.search).d, // page sort direction
    filterCode: parse(ownProps.location.search).filter, // filter code
    filter: state.filterCode.filters && parse(ownProps.location.search).filter && state.filterCode.filters[parse(ownProps.location.search).filter as string] || null,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
    filterCodeToUrl,
}, dispatch);

const MyDataPage = connect(
    mapStateToProps, mapDispatchToProps,
)(DP);

export {MyDataPage as default, BaseMyDataPage};