import styled from "styled-components";
import { InputNumber } from "antd";
import {
  whiteBackground,
  blueLightest,
  grayLight300,
  grayBase,
  XLGridColumnWidth,
  desktopGridColumnWidth,
  tabletGridColumnWidth,
  mobileGridColumnWidth,
  grayBackground,
  redBase,
  BodyText,
} 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 CustomInputNumber = styled(InputNumber)`
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 8px;
  width: ${(props) => `${getInputWidth(props.width, XLGridColumnWidth)}px`};
  height: 48px;
  background: ${whiteBackground};
  border: 2px solid ${blueLightest};
  border-radius: 8px;
  ${BodyText}
  color: ${grayBase};
  .ant-input-number-input-wrap ::placeholder {
    ${BodyText}
    color: ${(props) => `${props.status == "error" ? redBase : grayLight300}`};
  }
  :where(.css-dev-only-do-not-override-10ed4xt).ant-input-number-disabled,
  :where(.css-dev-only-do-not-override-10ed4xt).ant-input[disabled] {
    background-color: ${grayBackground};
  }
  :hover {
    border: 2px solid ${blueLightest};
  }
  :focus {
    border: 2px 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`};
  }
`;
