// @flow
import React from 'react';
import styled from 'styled-components';
import { type FilterBarTabProps } from './filter-bar-tab.proptypes';
import { getPaletteColor } from '../../../../mixins/branding';
import { getFontSize, getFontFamily } from '../../../../mixins/typography';
import { Span } from '../../../typography';
import { getSelectedStyles } from './filter-bar-tab.css-rules';
import {
  FOCUS_VISIBLE_SELECTOR,
  getBaseFocusState,
} from '../../../../mixins/focus';

const FilterBarTabButton = styled.button.attrs(() => ({
  fontSize: 'f1',
}))`
  padding: 0;
  margin: 0 10px;
  background: transparent;
  font-size: ${getFontSize};
  font-family: ${getFontFamily};
  color: ${getPaletteColor('greyscale-medium')};
  border: 0;
  position: relative;

  ${getBaseFocusState({ hoverTransition: false, activeTransition: false })}
  ${FOCUS_VISIBLE_SELECTOR} span {
    color: ${getPaletteColor('greyscale-black')};
    border-color: ${getPaletteColor('greyscale-black')};
  }

  &:hover {
    color: ${getPaletteColor('brand-secondary-base')};
  }

  &:active {
    color: ${getPaletteColor('brand-secondary-base')};
  }
`;

const FilterBarTabPlaceholder = styled(Span)`
  visibility: hidden;
  ${getSelectedStyles}
`;

const FilterBarTabContent = styled(Span)`
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  ${getSelectedStyles}
`;

export const FilterBarTab = ({
  label,
  selected,
  onClick,
}: FilterBarTabProps) => (
  <FilterBarTabButton onClick={onClick}>
    <FilterBarTabPlaceholder selected>{label}</FilterBarTabPlaceholder>
    <FilterBarTabContent selected={selected}>{label}</FilterBarTabContent>
  </FilterBarTabButton>
);
