import styled from "styled-components";
import { Input } from "antd";
import {
  whiteBackground,
  blueLightest,
  grayLight400,
  grayBase,
  XLGridColumnWidth,
  desktopGridColumnWidth,
  tabletGridColumnWidth,
  mobileGridColumnWidth,
  redLight400,
  redBase,
  grayBackground,
  BodyText,
  SmallBodyText,
} from "../constants";

const getInputWidth = (
  width: string | number | undefined,
  gridWidth: number
) => {
  let number;
  switch (width) {
    case "small":
      number = 1;
      break;
    case "medium":
      number = 2;
      break;
    case "large":
      number = 4;
      break;
    case "xl":
      number = 6;
      break;
    default:
      number = 2;
      break;
  }
  return number * gridWidth;
};
export const CustomInput = styled(Input)`
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 12px 8px;
  width: ${(props) => `${getInputWidth(props.width, XLGridColumnWidth)}px`};
  height: 48px;
  background: ${whiteBackground};
  border: 1px solid ${blueLightest};
  border-radius: 8px;
  ${BodyText}
  color: ${grayLight400};
  cursor: pointer;
  ::placeholder {
    ${BodyText}
    color: ${(props) => `${props.status == "error" ? redBase : grayLight400}`};
  }
  :where(.css-dev-only-do-not-override-10ed4xt).ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input {
    border-color: ${redLight400};
    color: ${redBase};
  }
  :where(.css-dev-only-do-not-override-10ed4xt).ant-input-disabled,
  :where(.css-dev-only-do-not-override-10ed4xt).ant-input[disabled] {
    background-color: ${grayBackground};
  }
  :hover {
    border: 1px solid ${blueLightest};
  }
  :focus {
    border: 1px solid ${blueLightest};
  }
  @media (max-width: 1439px) {
    width: ${(props) =>
      `${getInputWidth(props.width, desktopGridColumnWidth)}px`};
  }
  @media (max-width: 768px) {
    width: ${(props) =>
      `${getInputWidth(props.width, tabletGridColumnWidth)}px`};
  }
  @media (max-width: 480px) {
    width: ${(props) =>
      `${getInputWidth(props.width, mobileGridColumnWidth)}px`};
  }
`;

export const InputContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
`;

export const ErrorText = styled.div`
  ${SmallBodyText}
  color: ${redLight400};
  margin-top: 2px;
`;
