// @flow
import React, { type Ref, useCallback } from 'react';
import styled from 'styled-components';
import {
  getSelectionIndicatorShape,
  getForeground,
  getFocusedCss,
} from './components.css-rules';
import { type FontSize } from '../../../mixins/typography';
import {
  FOCUS_VISIBLE_SELECTOR,
  getBaseFocusState,
} from '../../../mixins/focus';
import { type TranslatedContent } from '../../../types';

export type FilterTabProps = {|
  value: string,
  label: TranslatedContent,
  selected: boolean,
  onClick: (input: string) => void,
  fontSize: FontSize,
  forwardRef: Ref<*> | null,
|};

const FilterTabButton = styled.button`
  ${getSelectionIndicatorShape}
  z-index: 1;
  background: transparent;
  color: ${getForeground};
  transition: color 0.15s cubic-bezier(0.34, 0, 0.53, 1.3);
  border: 0;
  position: relative;

  ${getBaseFocusState({ hoverTransition: false, activeTransition: false })}
  ${FOCUS_VISIBLE_SELECTOR} {
    ${getFocusedCss}
  }
`;

export const FilterTab = ({
  value,
  selected,
  onClick,
  label,
  fontSize,
  forwardRef,
}: FilterTabProps) => {
  const callback = useCallback(() => {
    onClick(value);
  }, [value, onClick]);

  return (
    <FilterTabButton
      ref={forwardRef}
      fontSize={fontSize}
      onClick={callback}
      selected={selected}
    >
      {label}
    </FilterTabButton>
  );
};
