import styled from "styled-components";
import {
  colorTokens,
  controlColorTokens,
  getTextSizes,
  inputColorTokens,
  textColorTokens,
  textLevels,
} from "../../design-system/tokens";
import { InputProps } from "./types";
import { Input } from "antd";

export const StyledInput: typeof Input = styled(Input)<InputProps>`
  &&.ant-input-status-error,
  &&.ant-input-affix-wrapper-status-error {
    border-color: ${colorTokens["error-color"]} !important;
    box-shadow: 0px 0px 5px ${colorTokens["error-color"]};
  }

  &&.ant-input-affix-wrapper-focused {
    border-color: ${inputColorTokens["input-focus-color-border"]};
    color: ${textColorTokens["text-default-color"]};
    box-shadow: 0px 0px 5px rgba(0, 97, 243, 0.9);
    border-right-width: 1px;
    outline: 0;
  }

  &&.ant-input,
  &&.ant-input-affix-wrapper {
    border: 1px solid;
    border-radius: 4px;
    padding: 5px;
    border-color: ${inputColorTokens["input-default-color-border"]};
    color: ${textColorTokens["text-disable-color"]};
    background-color: ${controlColorTokens["control-default-color"]};
    outline: none;
    &:disabled {
      color: ${textColorTokens["text-disable-color"]};
      background-color: ${controlColorTokens["control-disable-color"]};
    }
    &:focus {
      border-color: ${inputColorTokens["input-focus-color-border"]};
      color: ${textColorTokens["text-default-color"]};
      box-shadow: 0px 0px 5px rgba(0, 97, 243, 0.9);
      border-right-width: 1px;
      outline: 0;
    }
  }

  ${getTextSizes(textLevels["SPAN"])};
`;