/*
Copyright (c) 2018-2019 Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import * as React from 'react';
import FocusLock from 'react-focus-lock';
import { Button, KIND, SIZE } from '../button/index.js';
import { getOverrides } from '../helpers/overrides.js';
import FilterIcon from '../icon/filter.js';
import { StatefulPopover, PLACEMENT } from '../popover/index.js';
import { StyledFilterButton, StyledFilterContent, StyledFilterHeading, StyledFilterFooter } from './styled-components.js';
export default function Filter(props) {
  const {
    onSelectAll = () => {},
    onReset = () => {},
    overrides = {}
  } = props;
  const [MenuButton, menuButtonProps] = getOverrides(overrides.MenuButton, StyledFilterButton);
  const [Content, contentProps] = getOverrides(overrides.Content, StyledFilterContent);
  const [Heading, headingProps] = getOverrides(overrides.Heading, StyledFilterHeading);
  const [Footer, footerProps] = getOverrides(overrides.Footer, StyledFilterFooter);

  function getIconColor(theme) {
    if (props.disabled) {
      return theme.colors.mono500;
    }

    if (props.active) {
      return theme.colors.colorPrimary;
    }

    return theme.colors.tableFilter;
  }

  function getIconHoverColor(theme) {
    if (props.disabled || props.active) {
      return null;
    }

    return theme.colors.colorPrimary;
  }

  return React.createElement(StatefulPopover, {
    placement: PLACEMENT.bottom,
    stateReducer: (_, nextState) => {
      if (props.disabled) {
        return { ...nextState,
          isOpen: false
        };
      }

      return nextState;
    },
    content: // eslint-disable-next-line jsx-a11y/no-autofocus
    React.createElement(FocusLock, {
      autoFocus: false
    }, React.createElement(Heading, headingProps, "Filter Column"), React.createElement(Content, contentProps, props.children), React.createElement(Footer, footerProps, React.createElement(Button, {
      kind: KIND.minimal,
      size: SIZE.compact,
      onClick: () => {
        onSelectAll();
      }
    }, "Select All"), React.createElement(Button, {
      kind: KIND.minimal,
      size: SIZE.compact,
      onClick: () => {
        onReset();
      }
    }, "Reset")))
  }, React.createElement(MenuButton, menuButtonProps, React.createElement(FilterIcon, {
    overrides: {
      Svg: {
        style: ({
          $theme
        }) => ({
          color: getIconColor($theme),
          ':hover': {
            color: getIconHoverColor($theme),
            cursor: props.disabled ? null : 'pointer'
          }
        })
      }
    },
    size: 18
  })));
}