import PropTypes from 'prop-types';
import React, { Component } from 'react';
import translate from 'Utilities/String/translate';
import FilterMenuItem from './FilterMenuItem';
import MenuContent from './MenuContent';
import MenuItem from './MenuItem';
import MenuItemSeparator from './MenuItemSeparator';

class FilterMenuContent extends Component {

  //
  // Render

  render() {
    const {
      selectedFilterKey,
      filters,
      customFilters,
      showCustomFilters,
      onFilterSelect,
      onCustomFiltersPress,
      ...otherProps
    } = this.props;

    return (
      <MenuContent {...otherProps}>
        {
          filters.map((filter) => {
            return (
              <FilterMenuItem
                key={filter.key}
                filterKey={filter.key}
                selectedFilterKey={selectedFilterKey}
                onPress={onFilterSelect}
              >
                {typeof filter.label === 'function' ? filter.label() : filter.label}
              </FilterMenuItem>
            );
          })
        }

        {
          customFilters.length > 0 ?
            <MenuItemSeparator /> :
            null
        }

        {
          customFilters
            .sort((a, b) => a.label.localeCompare(b.label))
            .map((filter) => {
              return (
                <FilterMenuItem
                  key={filter.id}
                  filterKey={filter.id}
                  selectedFilterKey={selectedFilterKey}
                  onPress={onFilterSelect}
                >
                  {filter.label}
                </FilterMenuItem>
              );
            })
        }

        {
          showCustomFilters &&
            <MenuItemSeparator />
        }

        {
          showCustomFilters &&
            <MenuItem onPress={onCustomFiltersPress}>
              {translate('CustomFilters')}
            </MenuItem>
        }
      </MenuContent>
    );
  }
}

FilterMenuContent.propTypes = {
  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
  showCustomFilters: PropTypes.bool.isRequired,
  onFilterSelect: PropTypes.func.isRequired,
  onCustomFiltersPress: PropTypes.func.isRequired
};

FilterMenuContent.defaultProps = {
  showCustomFilters: false
};

export default FilterMenuContent;
