import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { parse } from 'query-string';
import { translate } from 'react-i18next';
import * as _ from 'lodash';

// Actions
import { applyFilters, updateRoute, applyOverviewFilters, loadAccessionsOverviewPage } from 'accessions/actions/public';
import { showSnackbar } from 'actions/snackbar';

// Models
import Accession from 'model/accession/Accession';
import FilteredPage, { IPageRequest } from 'model/FilteredPage';
import AccessionFilter from 'model/accession/AccessionFilter';
import AccessionOverview from 'model/accession/AccessionOverview';

// UI
import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import GridContainer from 'ui/layout/GridContainer';
import ContentHeader from 'ui/common/heading/ContentHeader';
import Loading from 'ui/common/Loading';
import Tabs, { Tab } from 'ui/common/Tabs';
import PropertiesCard from 'ui/common/PropertiesCard';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import Number from 'ui/common/Number';
import PageTitle from 'ui/common/PageTitle';

import AccessionFilters from './c/Filters';

// TODO only for demo
import Button from '@material-ui/core/Button';

interface IOverviewPageProps extends React.ClassAttributes<any> {
  overview: AccessionOverview;
  paged: FilteredPage<Accession>;
  filterCode: string;
  showSnackbar: (snack: string) => void;
  applyOverviewFilters: (filters: string | AccessionFilter, page?: IPageRequest) => void;
  updateRoute: (paged: FilteredPage<Accession>, path?: string) => void;
  currentTab: string;
  t: any;
}
/* tslint:disable */
class BrowsePage extends React.Component<IOverviewPageProps, any> {

  protected static needs = [
    ({ search, params: { filterCode } }) => {
      const qs = parse(search || '');
      return applyOverviewFilters(filterCode || '', FilteredPage.fromQueryString(qs));
    },
  ];

  constructor(props: IOverviewPageProps, context: any) {
    super(props, context);
  }

  public componentWillMount() {
    const { overview, filterCode, applyOverviewFilters } = this.props;
    if (! overview || filterCode !== overview.filterCode) {
      applyOverviewFilters(filterCode || '');
    }
  }
  public componentWillReceiveProps(nextProps) {
    const { filterCode: prevCode, overview: prevOverview } = this.props;
    const { filterCode, applyOverviewFilters, overview } = nextProps;

    if (prevOverview && overview && _.isEqual(overview.filter, prevOverview.filter)) {
      if (prevCode !== filterCode) {
        applyOverviewFilters(filterCode || '');
      }
    }
  }

  private addTerm = (property, term) => {
      const { overview, applyOverviewFilters, showSnackbar } = this.props;

      const updatedFilter: AccessionFilter = { ...overview.filter };
      switch (property) {
        case 'crop':
        case 'sampStat':
        case 'holder.code':
        case 'holder.country.iso3':
        case 'origin.iso3':
        case 'taxa.genus':
        case 'taxa.species':
        case 'storage':
          _.set(updatedFilter, property, _.concat(_.get(updatedFilter, property), term).filter(x => x != null));
          break;

        case 'sgsv':
        case 'available':
        case 'mlsStatus':
          _.set(updatedFilter, property, term === '1' ? true : false);
          break;

        // set
        default:
          _.set(updatedFilter, property, term);
      }

      // console.log(`Updated filter for ${property} +${term}`, updatedFilter);
      showSnackbar('Applying filters...');
      applyOverviewFilters(updatedFilter);
  };

  public render() {
    const { filterCode, currentTab, applyOverviewFilters, overview: overviewWrapper, t } = this.props;
    const overview = overviewWrapper && overviewWrapper.overview || null;

    const overviewKeys = ['institute.code', 'institute.country.code3', 'cropName', 'crop.shortName', 'sampStat', 'taxonomy.genus', 'taxonomy.genusSpecies',
        'countryOfOrigin.code3', 'donorCode', 'mlsStatus', 'available', 'duplSite', 'sgsv', 'storage', 'breederCode'];

    const skipTerms = ['Other', 'Missing', 'Not specified'];

    const overviewsTerms = new Map();
    if (overview) {
      overviewKeys.forEach((key) => {
        const overviewEl = overview[key];
        const terms = [].concat(overviewEl.terms, {term: 'Other', count: overviewEl.other}, {term: 'Not specified', count: overviewEl.missing});
        overviewsTerms.set(key, terms);
      });
    }

    const filterByTerm = (property, term, count) => {
        return (
            skipTerms.indexOf(term.term) === -1
                ? (<a onClick={ () => this.addTerm(property, term.term) }><Number value={ count } /></a>)
                : ( count )
        );
    };

    return (
      <PageLayout
        sidebar={
          <AccessionFilters initialValues={ overviewWrapper && overviewWrapper.filter || {} } onSubmit={ applyOverviewFilters }/>
        }
        withFooter
      >
        <PageTitle title={ t('accessions.public.p.browse.title') }/>
        <ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
        <Tabs
          tab={ currentTab }
          actions={
            <span>
              <Button> Something </Button>
            </span>
          }
        >
          <Tab name="data" to={ `/a/${filterCode || ''}` }>{ t('accessions.tab.data') }</Tab>
          <Tab name="overview" to={ `/a/overview/${filterCode || ''}` }>{ t('accessions.tab.overview') }</Tab>
          <Tab name="map" to={ `/a/map/${filterCode || '' }` }>{ t('accessions.tab.map') }</Tab>
        </Tabs>
          <PrettyFilters
              prefix="accessions"
              filterObj={ overviewWrapper && overviewWrapper.filter || {} }
              onSubmit={ applyOverviewFilters }
          />
        { ! overview ? <Loading /> :
          <div>
            <PageContents className="pt-1rem">
              <GridContainer>
                { overviewsTerms && overviewsTerms.get('institute.code') && overviewsTerms.get('institute.code').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('institute.code').map((term) => ({title: term.term, value: filterByTerm('holder.code', term, term.count) })) } title={ t(`accessions.common.overview.institute code`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('institute.country.code3') && overviewsTerms.get('institute.country.code3').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('institute.country.code3').map((term) => ({title: term.term, value: filterByTerm('holder.country.iso3', term, term.count) })) } title={ t(`accessions.common.overview.institute country code3`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('crop.shortName') && overviewsTerms.get('crop.shortName').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('crop.shortName').map((term) => ({title: term.term, value: filterByTerm('crop', term, term.count)})) } title={ t(`accessions.common.overview.crop shortName`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('cropName') && overviewsTerms.get('cropName').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('cropName').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.cropName`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('taxonomy.genus') && overviewsTerms.get('taxonomy.genus').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('taxonomy.genus').map((term) => ({title: term.term, value: filterByTerm('taxa.genus', term, term.count) })) } title={ t(`accessions.common.overview.taxonomy genus`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('taxonomy.genusSpecies') && overviewsTerms.get('taxonomy.genusSpecies').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('taxonomy.genusSpecies').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.taxonomy genusSpecies`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('sampStat') && overviewsTerms.get('sampStat').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('sampStat')
                    .filter((term) => term.term !== 'other').map((term) => ({title: t([`accessions.common.sampleStatus.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('sampStat', term, term.count) })) } title={ t(`accessions.common.overview.sampStat`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('storage') && overviewsTerms.get('storage').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('storage').map((term) => ({title: t([`accessions.common.storage.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('storage', term, term.count) })) } title={ t(`accessions.common.overview.storage`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('countryOfOrigin.code3') && overviewsTerms.get('countryOfOrigin.code3').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('countryOfOrigin.code3').map((term) => ({title: term.term, value: filterByTerm('origin.iso3', term, term.count)})) } title={ t(`accessions.common.overview.countryOfOrigin code3`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('donorCode') && overviewsTerms.get('donorCode').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('donorCode').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.donorCode`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('duplSite') && overviewsTerms.get('duplSite').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('duplSite').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.duplSite`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('breederCode') && overviewsTerms.get('breederCode').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('breederCode').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.breederCode`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('mlsStatus') && overviewsTerms.get('mlsStatus').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('mlsStatus').map((term) => ({title: t([`accessions.common.mlsStatus.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('mlsStatus', term, term.count) })) } title={ t(`accessions.common.overview.mlsStatus`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('available') && overviewsTerms.get('available').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('available').map((term) => ({title: t([`accessions.common.available.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('available', term, term.count) })) } title={ t(`accessions.common.overview.available`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('historic') && overviewsTerms.get('historic').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('historic').map((term) => ({title: t([`accessions.common.historic.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('historic', term, term.count) })) } title={ t(`accessions.common.overview.historic`) } small propertyItemProps={ { numeric: true } } />
                }
                { overviewsTerms && overviewsTerms.get('sgsv') && overviewsTerms.get('sgsv').length > 2 &&
                  <PropertiesCard propertiesList={ overviewsTerms.get('sgsv').map((term) => ({title: t([`accessions.common.sgsv.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('sgsv', term, term.count) })) } title={ t(`accessions.common.overview.sgsv`) } small propertyItemProps={ { numeric: true } } />
                }
              </GridContainer>
            </PageContents>
          </div>
        }
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  paged: state.accessions.public.paged || undefined,
  overview: state.accessions.public.overview,
  filterCode: ownProps.match.params.filterCode || '',
  currentTab: ownProps.match.params.tab || 'overview', // current tab, or ownProps.location.pathname
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  showSnackbar,
  applyFilters,
  applyOverviewFilters,
  loadAccessionsOverviewPage,
  updateRoute,
}, dispatch);


export default connect(mapStateToProps, mapDispatchToProps)(translate()(BrowsePage));