// @flow
import React from 'react';
import injectSheet from 'react-jss';
import classNames from 'classnames';
import styles from './styles';

// In-house modules
import CategoryItem from './components/CategoryItem';

type Props = {
  classes: Object,
  categories: Array<Object>,
  selectedCategory: Object,
  selectCategory: () => void,
  downloads: Array<Object>,
  openDownloads: boolean,
}

function CategoriesBar({
  classes,
  categories,
  selectedCategory,
  selectCategory,
  downloads,
  openDownloads,
}: Props) {
  return (
    <div className={ classes.categoriesBar }>
      <div className={ classNames({
        'categories-bar-container': true,
        'download-bar-open': openDownloads,
        'download-bar-pendings': downloads.length > 0 && !openDownloads,
      }) }>
        {
          categories.length ? categories.map((category) => {
            return (
              <CategoryItem { ...{
                key: category.id,
                category,
                selectedCategory,
                selectCategory } } />
            );
          }) : <p className="no-found medium-title-black">No content found on this channel</p>
        }
      </div>
    </div>
  );
}

export default injectSheet(styles)(CategoriesBar);