import React from "react";
import PropTypes from 'prop-types';

import Project from '../../../../model/Project';
import IDUtil from '../../../../util/IDUtil';
import SessionStorageHandler from '../../../../util/SessionStorageHandler';

import FlexRouter from '../../../../util/FlexRouter';
import LocalStorageHandler from '../../../../util/LocalStorageHandler';

import ProjectQueriesTable from './ProjectQueriesTable';
import ProjectViewWrapper from '../ProjectViewWrapper';

class ProjectQueriesView extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            selectedQueries: []
        };
    }

    componentDidMount(){
        // store tab to sessionStorage
        SessionStorageHandler.set("bg__project-tab", "queries");
    }

    onChange = () => this.props.onChange ? this.props.onChange() : null;

    updateComponent = () => {
        this.setState({
            selectedQueries: []
        }, this.props.onChange)
    };

    compareQueries = tableSelection => {
        LocalStorageHandler.storeQueries(this.props.project, tableSelection.map(nq => nq.id))
        FlexRouter.gotoQueryComparisonTool();
    }

    render() {
        return (
            <div className={IDUtil.cssClassName('project-queries-view')}>
                <ProjectQueriesTable
                    key={this.props.project.id+1}
                    handleCompareLink={this.compareQueries}
                    onChange={this.updateComponent}
                    project={this.props.project}
                    user={this.props.user} />
            </div>
        )
    }
}

ProjectQueriesView.propTypes = {
    user: PropTypes.shape({
        id: PropTypes.string.isRequired
    }).isRequired,
    project: Project.getPropTypes(false)
};

export default class WrappedProjectQueriesView extends React.PureComponent {
    render() {
        return <ProjectViewWrapper {...this.props} renderComponent={ProjectQueriesView} />
    }
}

WrappedProjectQueriesView.propTypes = ProjectQueriesView.propTypes;