import * as React from 'react';
import { reduxForm } from 'redux-form';
import { translate } from 'react-i18next';

import { DATASET_FILTERFORM } from 'datasets/constants';

import FiltersBlock from 'ui/common/filter/FiltersBlock';
import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';
import StringFilter from 'ui/common/filter/StringFilter';
import StringArrFilter from 'ui/common/filter/StringArrFilter';
import TextFilter from 'ui/common/filter/TextFilter';
import CropFilter from 'crop/ui/c/CropFilter';
import PartnerFilter from 'partners/ui/c/PartnerFilter';
import NumberFilter from 'ui/common/filter/NumberFilter';
import LicenceFilter from 'ui/common/filter/LicenceFilter';

// <StringArrFilter name="language" label="Language" placeholder="Language"/>

const DatasetFilters = ({ handleSubmit, initialize, t, ...other }) => (
  <FiltersBlock title={ t('datasets.common.modelName_plural') } handleSubmit={ handleSubmit } initialize={ initialize }{ ...other }>
    <TextFilter name="_text" label={ t('datasets.public.f.keywordSearch') } placeholder={ t('datasets.public.f.rice') } className="pb-10 pr-20 pl-20 pt-10"/>
    <TextFilter name="descriptors._text" label={ t('datasets.public.f.traitKeywords') } placeholder={ t('datasets.public.f.rice') } className="pt-10 pr-20 pl-20 pb-20"/>
    <CollapsibleComponentSearch title={ t('datasets.public.f.partner') }>
      <StringArrFilter name="owner.wiewsCodes" label={ t('datasets.public.f.faoWiews') } placeholder="COL003"/>
      <PartnerFilter name="owner" label="datasets.public.f.partner"/>
    </CollapsibleComponentSearch>
    <CollapsibleComponentSearch title={ t('datasets.public.f.evaluationSite') }>
      <StringArrFilter name="locations.userCountry" label={ t('datasets.public.f.countryEv') } placeholder={ t('datasets.public.f.countryPlaceholder') }/>
      <NumberFilter name="locations.decimalLatitude" label={ t('datasets.public.f.latitude') }/>
      <NumberFilter name="locations.decimalLongitude" label={ t('datasets.public.f.longitude') }/>
    </CollapsibleComponentSearch>
    <CollapsibleComponentSearch title={ t('datasets.public.f.crop') }>
      <CropFilter name="crops"/>
    </CollapsibleComponentSearch>
    <CollapsibleComponentSearch title={ t('datasets.public.f.accession') }>
      <StringArrFilter name="accessionRefs.genus" label={ t('datasets.public.f.genus') } placeholder={ t('datasets.public.f.genusPlaceholder') }/>
      <StringFilter name="accessionRefs.acceNumb" searchType="contains" label={ t('datasets.public.f.accNumber') } placeholder="IRGC100"/>
      <StringArrFilter name="accessionRefs.instCode" label={ t('datasets.public.f.faoWiews') } placeholder="PHL001"/>
      <StringArrFilter name="accessionRefs.doi" label={ t('datasets.public.f.accDoi') } placeholder="10.xxxx/yyyyy"/>
    </CollapsibleComponentSearch>
    <CollapsibleComponentSearch title={ t('datasets.public.f.licence') }>
      <LicenceFilter name={ t('datasets.public.f.rights') } className="p-20"/>
    </CollapsibleComponentSearch>
  </FiltersBlock>
);

export default translate()(reduxForm({
  enableReinitialize: true,
  form: DATASET_FILTERFORM,
})(DatasetFilters));