import React from 'react';
import styled, { css } from 'styled-components';

interface FormControlProps {
  error?: boolean;
}

const activeLabel = css`
  top: -14px;
  font-size: 0.75rem;
  color: ${props => props.theme.default.colors.darkGrey};
`;

// Non HTML compliant props that we don't want rendered in the DOM
// See: https://www.styled-components.com/docs/faqs#why-am-i-getting-html-attribute-warnings
interface DivPulledOutProps {
  error?: boolean;
}

/* eslint-disable @typescript-eslint/no-unused-vars */
const DivPullOutProps: React.FC<DivPulledOutProps> = ({
  error,
  ...props
}) => <div {...props} />;

export const FormControl = styled(DivPullOutProps)<FormControlProps>`
  position: relative;
  margin-bottom: 60px;
  text-align: left;

  input {
    background-color: transparent;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 4px 0 4px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 2px solid ${props => props.theme.default.colors.grey};
    color: ${props =>
      props.error
        ? `${props.theme.default.colors.red}!important`
        : props.theme.default.colors.black};

    ${props =>
      !props.error &&
      css`
        &:valid {
          color: ${props.theme.default.colors.blue};
        }
      `}

    &:disabled {
      -webkit-text-fill-color: ${props => props.theme.default.colors.darkGrey};
      color: ${props => props.theme.default.colors.darkGrey};
    }

    &:read-only {
      color: ${props => props.theme.default.colors.darkGrey};
    }

    &::placeholder {
      color: ${props => props.theme.default.colors.grey2};
    }
  }

  input {
    text-overflow: ellipsis;
    &:not([value='']) ~ label,
    &:focus ~ label,
    &:not([value='']):valid ~ label {
      ${activeLabel}
    }
  }

  label {
    color: ${props => props.theme.default.colors.grey};
    font-size: 1.2rem;
    font-weight: 500;
    position: absolute;
    pointer-events: none;
    top: 4px;
    transition: 0.2s ease all;
  }

  &:after {
    content: '';
    height: 2px;
    width: ${props => (props.tag === 'textarea' ? '100%' : '0')};
    transform: translateX(-50%);
    left: 50%;
    top: ${props => (props.tag === 'textarea' ? 'auto' : '36px')};
    position: absolute;
    background: ${props => props.theme.default.colors[props.tag === 'textarea' ? 'grey' : 'blue']};
    transition: 0.2s ease all;
  }

  &:focus-within {
    &:after {
      width: 100%;
      ${props =>
        props.tag === 'textarea' &&
        css`
          background: ${props.theme.default.colors.blue};
        `}
    }
  }

  > div {
    color: ${props =>
      props.error ? props.theme.default.colors.red : props.theme.default.colors.darkGrey};
  }
`;

FormControl.defaultProps = {
  error: false
};