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

import { TooltipWrapper } from 'features/Tooltip'
import { T9n } from 'features/T9n'

export const Container = styled.div``

export const Header = styled.div`
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
`

export const TabList = styled.div.attrs({ role: 'tablist' })`
  display: flex;
`

export const Tooltip = styled(TooltipWrapper)`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 17px;
  padding: 0 10px;
  border-radius: 6px;
  transform: none;
  font-size: 11px;
  line-height: 1;
  color: ${({ theme }) => theme.colors.black};

  ::before {
    display: none;
  }
`

export const TabTitle = styled.span`
  color: ${({ theme }) => theme.colors.white};
  opacity: 0.4;
`

export const Tab = styled.button.attrs({ role: 'tab' })`
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 10px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;

  &[aria-pressed="true"] {
    border-color: ${({ theme }) => theme.colors.white};

    ${TabTitle} {
      opacity: 1;
    }
  }
`

export const Switch = styled.div`
  display: flex;
`

export const SwitchTitle = styled(T9n)`
  font-size: 12px;
  color: ${({ theme }) => theme.colors.white};
  white-space: nowrap;
`

type SwitchButtonProps = {
  isFinalStatsType: boolean,
}

export const SwitchButton = styled.button<SwitchButtonProps>`
  width: 20px;
  height: 7px;
  margin-left: 5px;
  margin-top: 5px;
  border-radius: 2px;
  border: none;
  border: 1px solid ${({ theme }) => theme.colors.white};
  cursor: pointer;

  ${({ isFinalStatsType, theme }) => (!isFinalStatsType
    ? css`
        background-image: linear-gradient(
          to right,
          ${theme.colors.white} 33.333%,
          ${theme.colors.black} 33.333%,
          ${theme.colors.black} 66.666%,
          ${theme.colors.white} 66.666%,
          ${theme.colors.white} 72%,
          ${theme.colors.black} 72%,
          ${theme.colors.black} 100%)
      `
    : css`
        border-color: transparent;
        background-image: linear-gradient(
          to right,
          ${theme.colors.white} 33.333%,
          ${theme.colors.black} 33.333%,
          ${theme.colors.black} 38%,
          ${theme.colors.white} 38%,
          ${theme.colors.white} 66.666%,
          ${theme.colors.black} 66.666%,
          ${theme.colors.black} 72%,
          ${theme.colors.white} 72%,
          ${theme.colors.white} 100%)
      `
  )}
`
