/**
 * @file @see https://material.io/design/components/text-fields.html#usage
 */
import styled, { css } from 'styleh-components'
import { StyledInputProps, StyledInputWrapType } from './typings'

// @note - can also be used
// &:invalid { border-color: rgb(213, 77, 77); }
// &:valid { border-bottom-color: green; }
// &:hover { color: rgba(98, 0, 238, 0.87); }
export const StyledInput = styled.input`
  font-size: 1.3rem;

  padding: 0.75rem 0.5rem 0.5rem 0.5rem;
  margin: 0;

  background: transparent;
  border-radius: 0.25rem;
  border: 1px solid rgb(166, 175, 193);
  transition: 0.24s ease-in-out border-color;
  outline: ${props => (props.isActive ? 'none' : 'hidden')};
  color: #2c2c2c;
  height: 2.75rem;
  line-height: 1.5rem;

  && {
    :disabled {
      cursor: not-allowed;
      opacity: 0.7;
    }
    :focus,
    :active {
      border-color: #006caf;
    }
  }
  &&& {
    ${(props: StyledInputProps) =>
      props.isValid === false &&
      props.isDirty === true &&
      css`
        border-color: rgb(213, 77, 77);
      `};
  }

  ::placeholder {
    transition: 0.12s ease-in-out opacity;
    color: rgba(0, 0, 0, 0.5);
    opacity: ${(props: StyledInputProps) => (props.isActive ? 1 : 0)};
  }
`

/**
 * @see https://css-tricks.com/centering-css-complete-guide/
 *
 * was using font-size: 0.5rem; on animation, but it's janky
 *
 * this was for material design styles:
 *   padding: 0 0.5rem;
 *   background: white;
 *   hasValue & !isActive:
 *    transform: translateY(calc(-150% - 0.5rem)) translateX(-25%) scale(0);
 */
export const StyledLabelText = styled.label`
  position: absolute;
  top: calc(50%);
  left: 1rem;
  transform: translateY(calc(-50% - 0.5rem)) scale(1);
  cursor: text;

  color: rgb(166, 175, 193);
  transition: 0.1s ease-in-out font, 0.12s ease-in-out color,
    0.1s ease-in-out transform;

  ${(props: StyledInputProps) =>
    (props.hasValue || props.isActive) &&
    css`
      cursor: default;
      color: rgb(95, 108, 136);
      transform: translateY(calc(-150% - 0.1rem)) translateX(-25%) scale(0.5);
      ${props.isValid === false ? `color: rgb(213, 77, 77)` : ``};
    `};

  ${(props: StyledInputProps) =>
    props.isActive &&
    css`
      color: #006caf;
      ${props.isValid === false ? `color: rgb(213, 77, 77)` : ``};
    `};
`

// display: inline-flex;
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;
  height: 3.75rem;
  padding: 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
` 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
 *
 * flex-basis: 100% & width: 0;
 * is for tricking it from re-squishing when error is added invisibly
 */
export const StyledError = styled.span.attrs({
  role: 'alert',
})`
  color: rgb(213, 77, 77);
  font-size: 0.5rem;
  width: 0;
  flex-basis: 100%;
  visibility: hidden;
  ${(props: { isValid: boolean }) =>
    props.isValid === false &&
    css`
      visibility: visible;
    `};
`

/**
 * @note could use `isVisible`
 * @note changed this from a tooltip, to `renderAfter`/`renderIcon`...
 * @todo should finish this ^
 */
export const StyledTooltip = styled.span`
  visibility: hidden;
  position: absolute;
  color: #006caf;
  top: calc(50% - 1rem);
  right: 1rem;
  display: flex;
  width: 1rem;
  height: 1rem;

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

export const StyledAssistiveText = styled.span``