import styled, { css } from 'styled-components'
import { colorGet, cssMixin, fontSizeGet, ifProp } from '../../style/utils'
import { ColorsFields, FontSizesFields } from '../../style/themeFields'
import { Label as BaseLabel } from '../Label'
import { LabelProps, InputProps, HighlightProps, WrapperProps } from './'

export const ExternalLabel = styled(BaseLabel)`
  display: block;
  margin-bottom: -1rem;
  line-height: 1.3;
  font-size: ${fontSizeGet(FontSizesFields.Small)};
  position: relative;
  z-index: 100;
  ${cssMixin()};
`

export const Label = styled(BaseLabel)<LabelProps>`
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 1rem;
  transition: 0.2s ease all;
  overflow: hidden;
  // @ts-ignore
  ${ifProp(
    'isEmpty' as any,
    '',
    css`
      top: -6px;
      font-size: ${fontSizeGet(FontSizesFields.Small)};
    `,
  )};
  ${cssMixin()};
`
// @ts-ignore
const ifInvalidOr = ifProp<HighlightProps>('invalid')
export const Highlight = styled.span<HighlightProps>`
  position: relative;
  display: block;
  width: 100%;
  &:before {
    content: '';
    height: 2px; // Change to ems for scaling
    width: 0;
    bottom: 0;
    position: absolute;
    background: ${ifInvalidOr(
      colorGet(ColorsFields.Danger),
      colorGet(ColorsFields.Primary),
    )};
    transition: 300ms ease all;
    left: 0;
  }
  ${cssMixin()};
`

export const Input = styled.input<InputProps>`
  font-size: ${fontSizeGet(FontSizesFields.Regular)};
  padding: 1rem 10px 0.45rem 2px; // Change to ems for scaling
  display: block;
  width: 100%;
  line-height: 1.5em;
  border: none;
  border-bottom: ${ifInvalidOr(
    css`2px solid ${colorGet(ColorsFields.Danger)}`,
    '1px solid #757575',
  )};

  &:focus {
    outline: none;
  }
  &:focus ~ ${Label} {
    top: -6px;
    font-size: ${fontSizeGet(FontSizesFields.Small)}; // Change for ems for scaling
  }

  &:focus ~ ${Highlight}:before {
    width: 100%;
  }

  &::placeholder {
    opacity: 0;
  }

  ${cssMixin()};
`

export const Wrapper = styled.div<WrapperProps>`
  position: relative;
  ${cssMixin()};
`