import React, {Component} from 'react';
import {observer} from 'mobx-react';
import classNames from 'classnames';
import Slider from 'react-slick';
import {FormattedMessage} from 'react-intl';

import RootStore from '../../../stores/RootStore';
import {sliderSettings} from '../../../stores/Home';

import ProductItem from './ProductItem';

import {scrollIntoView} from '../../../helpers';

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import './ProductList.scss';

@observer
class ProductList extends Component {
  componentDidMount() {
    scrollIntoView('.product-list__row');
  }

  render() {
    const {filters, displayedProductGroups, selectedFilters, selectedProductId, selectedGeneralGroupId, toggleFilter} = RootStore.home;
    return (
      <section className={classNames('product-list home-section', {
        'product-list--show': selectedGeneralGroupId,
        'product-list--empty': !Boolean(displayedProductGroups.length)
      })}>
        {
          selectedGeneralGroupId && Boolean(displayedProductGroups.length) &&
          <div className="product-list__row">
            <h2 className="product-list__title">
              <FormattedMessage id="home.filter"/>
            </h2>

            <ul className="product-list__options">
              {
                filters.map(tag =>
                  <li className={classNames('option', {
                    'option--active': selectedFilters.includes(tag)
                  })} key={tag}
                      onClick={toggleFilter(tag)}>
                    {tag}
                  </li>
                )
              }
            </ul>
          </div>

        }

        {Boolean(displayedProductGroups.length) ?
          <Slider {...sliderSettings}>
            {displayedProductGroups.map(product => <ProductItem product={product} selectedProductId={selectedProductId}
                                                                key={product._id}/>)}
          </Slider> :
          <p className="not-found">Not found</p>
        }
      </section>
    );
  }
}

export default ProductList;