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

import { filterCodeToUrl } from 'actions/filterCode';
import { loadCrops } from 'crop/actions/public';
import { applyFilters, loadMoreDatasets, updateRoute } from 'datasets/actions/public';

import Dataset from 'model/catalog/Dataset';

import PagedLoader from 'ui/common/PagedLoader';
import Loading from 'ui/common/Loading';
import PaginationComponent from 'ui/common/pagination';
import DatasetFilters from './c/Filters';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import PageTitle from 'ui/common/PageTitle';
import DatasetCard from './c/Card';

import ContentHeader from 'ui/common/heading/ContentHeader';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import BrowsePageTemplate from 'ui/pages/_base/BrowsePage';
import { translate } from 'react-i18next';

class BrowsePage extends BrowsePageTemplate<Dataset> {

  protected renderDataset = (d: Dataset) => <DatasetCard dataset={ d } key={ d.uuid }/>;

  public render() {
    const { paged, t, loadMoreData, error, loading } = this.props;

    return (
      <PageLayout sidebar={
        <DatasetFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }/>
      }>
        <ScrollToTopOnMount/>
        <PageTitle title={ t('datasets.common.modelName_plural') }/>
        <ContentHeader title={ t('datasets.common.modelName_plural') } subtitle={ t('datasets.public.p.browse.subtitle') }/>
        <PaginationComponent
          pageObj={ paged }
          onSortChange={ this.onSortChange }
          displayName={ t('datasets.common.modelName') }
          sortOptions={ Dataset.SORT_OPTIONS }
          infinite
        />
        <PrettyFilters
          prefix="datasets"
          filterObj={ paged && paged.filter || {} }
          onSubmit={ this.myApplyFilters }
        />
        <PageContents className="pt-1rem container-spacing-horizontal">
          { loading && <Loading /> }
          { error && <div>{ JSON.stringify(error) }</div> }
          <PagedLoader
            paged={ paged }
            loadMore={ loadMoreData }
            roughItemHeight={ 300 }
            itemRenderer={ this.renderDataset }
          />
        </PageContents>
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  paged: state.datasets.public.paged ? state.datasets.public.paged.data : undefined,
  loading: state.datasets.public.paged ? state.datasets.public.paged.loading : false,
  error: state.datasets.public.paged ? state.datasets.public.paged.error : undefined,
  filterCode: ownProps.match.params.filterCode,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  applyFilters,
  loadMoreData: loadMoreDatasets,
  loadCrops,
  filterCodeToUrl,
  updateRoute,
}, dispatch);

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