import styled, { css } from 'styled-components'
import {
  ColorsFields,
  FontSizesFields,
  PaddingFields,
  ShadowsFields,
} from '../../style/themeFields'
import {
  colorGet,
  fontSizeGet,
  getUnitProp,
  paddingGet,
  shadowGet,
} from '../../style/utils'
import { Size } from './Size'

type ContentLabelProps = {
  checked?: boolean
  size: Size
}

type ShortenedLabelProps = {
  checked?: boolean
  size: Size
  maxWidth: string | number
}

const sizeStyle = {
  [Size.REGULAR]: css`
    font-size: ${fontSizeGet(FontSizesFields.Regular)};
    padding: ${paddingGet(PaddingFields.ButtonRegular)};
  `,
  [Size.SMALL]: css`
    padding: ${paddingGet(PaddingFields.ButtonSmall)};
    font-size: ${fontSizeGet(FontSizesFields.Small)};
  `,
}

export const Content = styled.span<ContentLabelProps>`
  ${({ size }) => sizeStyle[size]};
  outline: none;
  border-width: 0;
  cursor: pointer;
  display: inline-block;
  color: ${colorGet(ColorsFields.LightText)};
  &:hover {
    background-color: ${colorGet(ColorsFields.HoverLightBackground)};
  }
`

export const ShortenedContent = styled(Content)<ShortenedLabelProps>`
  max-width: ${getUnitProp('maxWidth')};
  overflow-x: hidden;
  text-overflow: ellipsis;
  height: 100%;
  vertical-align: middle;
`

export const RadioInput = styled.input`
  display: none;
  &:checked + ${Content} {
    background-color: ${colorGet(ColorsFields.Button)};
    color: ${colorGet(ColorsFields.SelectedToggleText)};
  }
`

export const OptionsGroupContainer = styled.div`
  box-shadow: ${shadowGet(ShadowsFields.ButtonGroupShadow)};
  display: inline-flex;
  flex-direction: row;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
`