import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'

type TabProps = {
  disabled?: boolean,
  selected?: boolean,
  upperCase?: boolean,
}

export const Tab = styled.button.attrs(({ selected }: TabProps) => ({
  'aria-pressed': selected,
}))<TabProps>`
  border: none;
  outline: none;
  height: 100%;
  padding-top: 0.38rem;
  padding-bottom: 0.27rem;
  font-weight: 600;
  font-size: 0.519rem;
  line-height: 0.85rem;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  cursor: pointer;

  ${({ selected, theme }) => (
    selected
      ? css`
        background-color: #FFFFFF;
        color: ${theme.colors.black};
      `
      : css`
        background-color: transparent;
        color: #FFFFFF;

        :hover {
          background-color: #484848;
        }
      `
  )}

  ${({ upperCase }) => (
    upperCase ? 'text-transform: uppercase;' : ''
  )}

   ${({ disabled }) => (
    disabled
      && css`
        pointer-events: none;
        opacity: 0.7;
       `
  )}

  :not(:last-child) {
    border-right: 1px solid #FFFFFF;
  }
  ${isMobileDevice
    ? css`
      font-size: 10px;
    `
    : ''};
`

type TabGroupProps = {
  buttons: number,
}

export const TabsGroup = styled.div.attrs({
  role: 'group',
})<TabGroupProps>`
  width: 100%;
  height: 100%;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border: 1px solid #FFFFFF;
  border-radius: 2px;

  ${Tab} {
    width: ${({ buttons }) => 100 / buttons}%;
  }
  ${isMobileDevice
    ? css`
      height: 28px;
    `
    : ''};
`