import React, { useEffect, useState } from 'react';
import DocumentsList from '../components/documentsList';
import { useSelector } from 'react-redux';
import { selectDocuments, selectDocumentsLoadingStatus } from '../store/documents.selectors';
import { Spinner } from 'app/shared/components/spinner/spinner';
import * as Text from 'app/shared/components/text/text';
import DocumentsFilters from '../components/documentsFilters';
import { getScreenWidth } from 'app/shared/store/ui/uiSelectors';
import { isSmallerThanLargeScreen } from 'app/shared/store/ui/ui.helper';
import cx from 'classnames';

const DocumentsPoolPage = () => {
  const documents = useSelector(selectDocuments);
  const isLoading = useSelector(selectDocumentsLoadingStatus);
  const screenSize = useSelector(getScreenWidth);
  const isMobileSize = isSmallerThanLargeScreen(screenSize);

  const [ open, toggleFilters ] = useState(!isMobileSize);

  useEffect(() => {
    toggleFilters(!isMobileSize);
  }, [screenSize]);

  const wrapperClassName = cx('o-layout',
    { 'o-layout--vertical-reverse': isMobileSize }
  );

  return <div className="o-main-column u-margin-top--big">
    {isLoading ? <Spinner /> :
      documents.length
        ? <div className="o-layout o-layout--vertical">
          {isMobileSize && <div id="mobile-filters">
            <Text.Paragraph
              size="small"
              extraClass="u-color--primary u-align--right u-cursor--pointer"
            >
              <p onClick={() => toggleFilters(!open)}>
                {open
                  ? <>
                    <i className='icon-close-hamburger u-margin-right u-font-size--medium' />
                    Close
                  </>
                  : <>
                    <i className='icon-modify u-margin-right--small' />
                    Filter
                  </>
                }
              </p>
            </Text.Paragraph>
          </div>}
          <div className={wrapperClassName}>
            <div className="o-layout__item-12 o-layout__item-lg-8 u-margin-bottom--jumbo">
              <DocumentsList />
            </div>
            {open && <div className="o-layout__item-12 o-layout__item-lg-4 o-gutter-lg-left--medium u-margin-bottom--big">
              <DocumentsFilters />
            </div>}
          </div>
        </div>
        : <Text.Paragraph extraClass="u-full-width u-margin-top--big u-align--right">
          No documents available
        </Text.Paragraph>
    }
  </div>;
};

export { DocumentsPoolPage };