import React from 'react';
import * as Text from 'app/shared/components/text/text';
import ToggleButton from 'app/shared/components/ToggleButton/toggleButton';
import { useDispatch, useSelector } from 'react-redux';
import {
  selectCategories,
  selectDocumentsBookmarksFilter,
  selectDocumentsCategoryFilter,
} from '../store/documents.selectors';
import cx from 'classnames';
import {
  addDocumentsCategoryFilter,
  removeDocumentsCategoryFilter, resetDocumentsCategoryFilter,
  setDocumentsBookmarksFilter,
} from '../store/documents.actions';

const DocumentsFilters = () => {
  const dispatch = useDispatch();
  const categories = useSelector(selectCategories);
  const bookmarksOnly = useSelector(selectDocumentsBookmarksFilter);
  const selectedCategories = useSelector(selectDocumentsCategoryFilter);

  const handleCategorySelection = (categoryId: number, isSelected: boolean) => () => {
    if (isSelected) {
      dispatch(removeDocumentsCategoryFilter(categoryId));
    } else {
      dispatch(addDocumentsCategoryFilter(categoryId));
    }
  };

  const handleClearCategoriesFilter = () => {
    dispatch(resetDocumentsCategoryFilter());
  };

  const handleBookmarksSelection = () => {
    dispatch(setDocumentsBookmarksFilter(!bookmarksOnly));
  };

  return <div className="c-documents-filters o-layout o-layout--vertical o-gutter--medium o-gutter-lg--big">
    <Text.Headline size="h4">Filters</Text.Headline>
    <div className="o-layout o-layout--space-between u-margin-bottom--big u-margin-lg-bottom--medium">
      <Text.Paragraph size="small" extraClass="u-margin-bottom--none">
        <i className="icon-bookmark u-margin-right--small" />
        Show bookmarks only
      </Text.Paragraph>
      <ToggleButton active={bookmarksOnly} onToggle={handleBookmarksSelection} />
    </div>
    <hr className="c-documents-filters__separator"/>
    <div className="o-layout o-layout--space-between u-margin-top--big u-margin-lg-top--medium u-margin-bottom--tiny">
      <Text.Label extraClass="u-margin-bottom--none">document type</Text.Label>
      {selectedCategories.length > 0 && <div onClick={handleClearCategoriesFilter}>
        <Text.Paragraph
          size='small'
          extraClass='u-margin-bottom--none u-color--primary u-cursor--pointer u-font--clear-spacings'
        >
          <i className='icon-close-hamburger u-font-size--small u-margin-right--small' />
          Clear all
        </Text.Paragraph>
      </div>}
    </div>
    {categories.map(category => {
      const isSelected = selectedCategories.includes(category.id);
      const checkmarkClassName = cx('c-documents-filters__checkbox', 'u-margin-right', 'o-layout', 'o-layout--aligned',
        'o-layout--justified',
        { 'c-documents-filters__checkbox--selected': isSelected }
      );
      return <div key={category.id}>
        <div className="o-layout o-layout--aligned u-margin-top">
          <div className={checkmarkClassName} onClick={handleCategorySelection(category.id, isSelected)}>
            {isSelected && <i className="icon-check u-color--white u-font-size--small" />}
          </div>
          <Text.Paragraph size="small" extraClass="u-margin-bottom--none">{category.label}</Text.Paragraph>
        </div>
      </div>;
    })}
  </div>;
};

export default DocumentsFilters;