import React from 'react';
import PropTypes from 'prop-types';

import { SearchBar } from '../../molecules/searchBar/SearchBar';
import { Dropdown } from '../dropdown/Dropdown';
import { DropdownToggle } from '../dropdown/DropdownToggle';
import { DropdownMenu } from '../dropdown/DropdownMenu';
import { DropdownItem } from '../dropdown/DropdownItem';
import { Text } from '../../atoms/text/Text';
import { Icon } from '../../atoms/icon/Icon';

const propTypes = {
  /*
    Search string used to filter items
  */
  search: PropTypes.string,
  /*
    Method to update the search string
  */
  setSearch: PropTypes.func,
  /*
    String defining in which order the items should be sorted
  */
  sortBy: PropTypes.string,
  /*
    Method to update the sortBy string
  */
  setSortBy: PropTypes.func,
  /*
    Array of the sortBy string options
  */
  sortByOptions: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.string,
  })),
  /*
    String that defines the grouping of the items
  */
  groupBy: PropTypes.string,
  /*
    Method to update the groupBy string
  */
  setGroupBy: PropTypes.func,
  /*
    Array of the groupBy string options
  */
  groupByOptions: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.string,
  })),
  /*
    Props passed to the SearchBar component
  */
  searchBarProps: PropTypes.object,
};
const defaultProps = {
  search: '',
  setSearch: () => {},
  sortBy: '',
  setSortBy: () => {},
  sortByOptions: [],
  groupBy: '',
  setGroupBy: () => {},
  groupByOptions: [],
  searchBarProps: {},
};

const groupByNoneOption = {
  label: 'None',
  value: '',
};

export const ListSearchFilters = ({
  search,
  setSearch,
  sortBy,
  setSortBy,
  sortByOptions,
  groupBy,
  setGroupBy,
  groupByOptions,
  searchBarProps,
}) => {
  const sortBySelected = sortByOptions
    && sortByOptions.length > 0 && sortByOptions.find((x) => x.value === sortBy);
  const groupBySelected = groupByOptions
    && groupByOptions.length > 0 && groupByOptions.find((x) => x.value === groupBy);

  return (
    <div className="sui-g-grid as--no-wrap@md">
      <div className="sui-g-grid__item as--fill@md">
        <SearchBar
          value={search}
          onChange={setSearch}
          {...searchBarProps}
        />
      </div>

      {
        sortByOptions && sortByOptions.length > 0 && (
          <div className="sui-g-grid__item as--auto">
            <Dropdown>
              <DropdownToggle tag="button" defaultClassName="sui-h-p-xs">
                <p className="sui-h-m-none">
                  <Text
                    color="light"
                    tag="span"
                    fontSize="sm"
                    className="sui-h-mr-xs"
                  >
                    Sort by:
                  </Text>

                  <Text tag="span" fontSize="sm">
                    <strong>{sortBySelected && sortBySelected.label}</strong>
                    <Icon name="fa-caret-down" />
                  </Text>
                </p>
              </DropdownToggle>

              <DropdownMenu>
                {sortByOptions
                  .map((x) => (
                    <DropdownItem
                      key={x.value}
                      isActive={x.value === sortBy}
                      onClick={() => setSortBy(x.value)}
                    >
                      {x.label}
                    </DropdownItem>
                  ))}
              </DropdownMenu>
            </Dropdown>
          </div>
        )
      }

      {
        groupByOptions && groupByOptions.length > 0 && (
          <div className="sui-g-grid__item as--auto">
            <Dropdown>
              <DropdownToggle tag="button" defaultClassName="sui-h-p-xs">
                <p className="sui-h-m-none">
                  {!groupBy ? (
                    <Text tag="span" fontSize="sm">
                      <strong>Group by:</strong>
                      <Icon name="fa-caret-down" />
                    </Text>
                  ) : (
                    <>
                      <Text
                        color="light"
                        tag="span"
                        fontSize="sm"
                        className="sui-h-mr-xs"
                      >
                        Group by:
                      </Text>

                      <Text tag="span" fontSize="sm">
                        <strong>{groupBySelected && groupBySelected.label}</strong>
                        <Icon name="fa-caret-down" />
                      </Text>
                    </>
                  )}
                </p>
              </DropdownToggle>

              <DropdownMenu>
                {[groupByNoneOption, ...groupByOptions].map((x) => (
                  <DropdownItem
                    key={x.value}
                    isActive={x.value === groupBy}
                    onClick={() => setGroupBy(x.value)}
                  >
                    {x.label}
                  </DropdownItem>
                ))}
              </DropdownMenu>
            </Dropdown>
          </div>
        )
      }
    </div>
  );
};

ListSearchFilters.propTypes = propTypes;
ListSearchFilters.defaultProps = defaultProps;
