import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Map } from 'immutable';
import { tableActions } from '~/redux/actions/table';
import tableService from '~/services/tableService';

import { Steps } from './constants';
import StepsBlock from './components/StepsBlock';
import StatisticsDataForm from './components/StatisticsDataForm';
import TableFilterGrid from './components/TableFilterGrid';
import SelectedDataTable from './components/SelectedDataTable';

import './PortalPageContainer';

class PortalPageContainer extends Component {
  state = {
    step: Steps.StatisticsDataForm,
    isChangingFilters: false,
    filterBlocks: [],
  }

  setStatisticsData = (statisticsData) => {
    const { dispatch } = this.props;
    dispatch(tableActions.setStatisticsData(statisticsData));
  }

  setFilterValues = (filter) => {
    const { dispatch } = this.props;
    dispatch(tableActions.setFilterValues(filter));
  }

  nextStep = () => {
    const { step } = this.state;
    switch (step) {
      case Steps.STATISTICS_DATA: {
        const { tableInfo } = this.props;
        const statisticsData = tableInfo.get('statisticsData');
        const sphereParameter = statisticsData.get('sphereParameter');
        const subjects = statisticsData.get('subjects').toArray();

        tableService.getFilters({ subjects, sphereParameter }).then((filters) => {
          const filterBlocks = [];
          filters.forEach((filter) => {
            filterBlocks.push({
              id: filter.id,
              name: filter.name,
              values: filter.elements.map(element => ({ value: element.id, text: element.name })),
            });
          });

          this.setState({
            step: step + 1,
            filterBlocks,
          });
        });
        break;
      }

      case Steps.FILTERS: {
        const { tableInfo } = this.props;
        const { filterBlocks } = this.state;
        const selectedFilters = tableInfo.get('selectedFilters');
        const allFiltersSelected = filterBlocks.length === selectedFilters.size;
        const eachFilterHasValues = allFiltersSelected
          && selectedFilters.every(filter => filter.values.length !== 0);
        if (!eachFilterHasValues) {
          break;
        }
        const { dispatch } = this.props;
        const statisticsData = tableInfo.get('statisticsData');
        const tableOptions = {
          statisticsData: {
            statisticType: statisticsData.get('statisticType'),
            subjects: statisticsData.get('subjects').toArray(),
            sphere: statisticsData.get('sphere'),
            sphereParameter: statisticsData.get('sphereParameter'),
          },
          selectedFilters: selectedFilters.toArray(),
        };
        dispatch(tableActions.clearFilterValues());
        dispatch(tableActions.getTableData(tableOptions));

        this.setState({
          step: step + 1,
          isChangingFilters: true,
        });
        break;
      }

      default: {
        this.setState({
          step: step + 1,
        });
      }
    }
  }

  previousStep = () => {
    const { step } = this.state;
    const { dispatch } = this.props;
    switch (step) {
      case Steps.FILTERS: {
        this.setState({
          step: step - 1,
          isChangingFilters: false,
        });
        break;
      }
      case Steps.TABLE: {
        dispatch(tableActions.clearGrid());
        this.setState({
          step: step - 1,
          isChangingFilters: false,
        });
        break;
      }

      default: {
        this.setState({
          step: step - 1,
        });
      }
    }
  }

  render() {
    const { step, isChangingFilters, filterBlocks } = this.state;
    const { tableInfo } = this.props;
    const statisticsData = tableInfo.get('statisticsData');
    const grid = tableInfo.get('grid');
    const getTableDataSuccess = tableInfo.get('getTableDataSuccess');
    const selectedFilters = tableInfo.get('selectedFilters');

    switch (step) {
      case Steps.STATISTICS_DATA:
        return (
          <div className="PortalPageContainer">
            <StepsBlock step={step} />
            <StatisticsDataForm
              statisticsData={statisticsData}
              setStatisticsData={this.setStatisticsData}
              nextStep={this.nextStep}
            />
          </div>
        );
      case Steps.FILTERS:
        return (
          <div className="PortalPageContainer">
            <StepsBlock step={step} />
            <TableFilterGrid
              selectedFilters={selectedFilters.toArray()}
              filterBlocks={filterBlocks}
              isChangingFilters={isChangingFilters}
              setFilterValues={this.setFilterValues}
              previousStep={this.previousStep}
              nextStep={this.nextStep}
            />
          </div>
        );

      case Steps.TABLE:
        return (
          <div className="PortalPageContainer">
            <StepsBlock step={step} getTableDataSuccess={getTableDataSuccess} />
            <SelectedDataTable
              tableData={grid}
              previousStep={this.previousStep}
            />
          </div>
        );
        // skip default
    }
  }
}

PortalPageContainer.propTypes = {
  dispatch: PropTypes.func.isRequired,
  tableInfo: PropTypes.instanceOf(Map).isRequired,
};

function mapStateToProps(state) {
  return {
    tableInfo: state.tableInfo,
  };
}


export default connect(mapStateToProps)(PortalPageContainer);