import styled, { css } from 'styled-components';
import { COLORS } from '../../constants/colors';
import { SHADOWS } from '../../constants/shadows';

interface IInput {
  isInvalid?: boolean;
  disabled?: boolean;
  sm?: boolean;
  lg?: boolean;
  noBorder?: boolean;
  noMaxWidth?: boolean;
  upperCase?: boolean;
  register?: boolean;
  autoComplete?: string;
}

const Input = styled.input`
  padding: 5px 20px 5px 10px;
  max-width: 130px;
  border-radius: 4px;
  border: 1px solid ${COLORS.gray400};
  min-width: 150px;

  &::placeholder {
    font-size: 14px;
    color: ${COLORS.gray500};
  }

  &:focus {
    outline: none;
    border: 1px solid ${COLORS.green100};
  }

  ${SHADOWS.extraSoft200};

  ${({ disabled }: IInput) => disabled && DISABLED}
  ${({ sm }: IInput) => sm && SM}
  ${({ lg }: IInput) => lg && LG}
  ${({ noBorder }: IInput) => noBorder && NO_BORDER}
  ${({ noMaxWidth }: IInput) => noMaxWidth && NO_MAX_WIDTH}
  ${({ isInvalid }: IInput) => isInvalid && INVALID}
  ${({ upperCase }: IInput) => upperCase && UPPERCASE}
  ${({ register }: IInput) => register && REGISTER}
`;

const INVALID = css`
  border-color: ${COLORS.red};
`;

const NO_MAX_WIDTH = css`
  max-width: unset;
  width: 100%;
`;

const DISABLED = css`
  cursor: not-allowed;
  background-color: ${COLORS.gray100};
`;
const SM = css`
  position: relative;
  width: 90px;
  padding: 2px 8px;

  background-color: ${COLORS.white};
  color: ${COLORS.gray800};

  border-radius: 4px;

  font-size: 13px;
  min-width: unset;
`;

const LG = css`
  height: 37px;
  font-size: 14px;
`;

const NO_BORDER = css`
  border: 1px solid ${COLORS.transparent};
`;

const UPPERCASE = css`
  text-transform: uppercase;
`;

const REGISTER = css `
  width: 250px;
`;

Input.displayName = 'Input';

export { Input };