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

import { isMobileDevice } from 'config/userAgent'

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

export const Tab = styled.button.attrs(({ selected }: TabProps) => ({
  'aria-pressed': selected,
}))<TabProps>`
  border: none;
  outline: none;
  height: 100%;
  width: 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;
  display: flex;
  align-items: center;
  justify-content: center;
  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;
       `
  )}

  ${({ width }) => (
    !isMobileDevice
      ? css`
        @media (orientation: landscape){
          width: ${width}% !important;
        }
      `
      : ''
  )}

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

  &:only-child {
    background: transparent;
    color: #FFFFFF;
    cursor: default;
  }
`

export const TabsGroup = styled.div.attrs({
  role: 'group',
})`
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  display: flex;

  > :not(:only-child) {
    border: 1px solid #FFFFFF;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  }

  ${isMobileDevice
    ? css`
      height: 32px;
    `
    : ''};
`
