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

import { filterCodeToUrl } from 'actions/filterCode';
import { applyFilters, loadMoreDescriptors, updateRoute } from 'descriptors/actions/public';

import Descriptor from 'model/catalog/Descriptor';
import PagedLoader from 'ui/common/PagedLoader';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import Loading from 'ui/common/Loading';
import PaginationComponent from 'ui/common/pagination';
import DescriptorCard from 'descriptors/ui/c/DescriptorCard';
import DescriptorFilters from 'descriptors/ui/c/Filters';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import PageTitle from 'ui/common/PageTitle';

import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
import BrowsePageTemplate from 'ui/pages/_base/BrowsePage';

class BrowsePage extends BrowsePageTemplate<Descriptor> {

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

    const stillLoading: boolean = (!paged || !paged.content);

    const renderDescriptor = (d: Descriptor) => (
      <DescriptorCard key={ d.uuid } descriptor={ d } complete dataType vocabulary/>
    );

    return (
      <PageLayout sidebar={
        <DescriptorFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }/>
      }>
        <PageTitle title={ t('descriptors.public.p.browse.title') }/>
        <ContentHeader
          title={ t('descriptors.public.p.browse.title') }
          subtitle={ t('descriptors.public.p.browse.subtitle') }
        />
        <ScrollToTopOnMount/>
        <PaginationComponent
          pageObj={ paged }
          onSortChange={ this.onSortChange }
          displayName="descriptors.common.modelName"
          infinite
          sortOptions={ Descriptor.SORT_OPTIONS }
        />
        <PrettyFilters
          prefix="descriptors"
          filterObj={ paged && paged.filter || {} }
          onSubmit={ this.myApplyFilters }
        />
        <PageContents className="pt-1rem container-spacing-horizontal">
          { stillLoading ? <Loading/> :
            <PagedLoader
              paged={ paged }
              loadMore={ loadMoreData }
              roughItemHeight={ 600 }
              itemRenderer={ renderDescriptor }
            />
          }
        </PageContents>
      </PageLayout>
    );
  }
}


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

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

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