import { css } from 'glamor';
import { observer } from 'mobx-react';
import { TiFilter } from 'react-icons/ti';
import { useApphouse } from '../../context/useApphouse';
import React from 'react';
import { Button, ButtonProps } from '../Button';
import { setAlpha } from '../../utils/color/setAlpha';

interface FilterButtonProps extends ButtonProps {
  /**
   * If set, the button will change colors
   */
  selected: boolean;
}
/**
 * A button that has a filter icon associated with it.
 */
export const ButtonFilter: React.FC<FilterButtonProps> = observer((props) => {
  const { selected, children } = props;
  const { theme } = useApphouse();
  const { tokens, colors } = theme;
  return (
    <Button
      {...props}
      styleOverwrites={{
        backgroundColor: selected
          ? colors.brand
          : setAlpha(colors.onPrimary, 0.1),
        border: 0,
        alignItems: 'center',
        display: 'flex'
      }}
    >
      <span {...css({ color: 'inherit', opacity: 0.3 })}>
        <TiFilter size={tokens.iconSize.s} />
      </span>{' '}
      <span>{children}</span>
    </Button>
  );
});