import styled, { css } from 'styleh-components'
import { StyledInputProps, StyledInputWrapType } from './typings'

// @todo use Switch > Checkbox?
export const StyledInput = styled.input`
  font-size: 1.3rem;
  padding: 10px 10px 10px 5px;
  background: transparent;
  display: block;

  border: none;
  border-bottom: 1px solid #757575;
  transition: 1s ease-in-out border-bottom-color;
  outline: ${props => (props.isActive ? 'none' : 'hidden')};

  ${(props: StyledInputProps) =>
    props.isValid === false &&
    css`
      border-bottom-color: red;
    `};

  &:invalid {
    border-bottom-color: red;
  }
  &:valid {
    border-bottom-color: green;
  }

  &:hover {
    color: rgba(98, 0, 238, 0.87);
  }

  ::placeholder {
    color: rgba(0, 0, 0, 0.5);
    opacity: ${(props: StyledInputProps) => (props.isActive ? 1 : 0)};
  }
`

export const StyledLabelText = styled.label`
  position: absolute;
  top: 0;
  color: rgba(0, 0, 0, 0.6);
  transition: 1s ease-in-out color;

  ${(props: StyledInputProps) =>
    props.isActive &&
    css`
      color: rgba(98, 0, 238, 0.87);
    `};

  ${(props: StyledInputProps) =>
    (props.hasValue || props.isActive) &&
    css`
      font-size: 0.5rem;
    `};
`

export const StyledInputWrap = styled.div`
  position: relative;
  display: flex;
  font-family: Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin-top: 0.5rem;
  min-height: 1.5rem;
` as StyledInputWrapType

/**
 * @see https://www.w3.org/WAI/GL/wiki/Using_ARIA_role_of_alert_for_Error_Feedback_in_Forms
 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints
 */
export const StyledError = styled.span.attrs({ role: 'alert' })`
  color: red;

  visibility: hidden;
  ${(props: { isValid: boolean }) =>
    props.isValid === false &&
    css`
      visibility: visible;
    `};
`

// or isVisible
export const StyledTooltip = styled.span`
  visibility: hidden;

  ${(props: { isActive: boolean }) =>
    props.isActive &&
    css`
      visibility: visible;
    `};
`