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

export const StyledSelect: typeof Select = styled(Select)<SelectProps>`
  &.ant-select-status-error {
    border-color: ${colorTokens["error-color"]} !important;
    box-shadow: 0px 0px 5px ${colorTokens["error-color"]};
  }

  &.ant-select-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-select-selector {
    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"]};
    }
  }

  &.ant-select-multiple .ant-select-selection-item {
    background: ${controlColorTokens["control-primary-color"]};
    border-radius: 3px;
    border-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 7px;
  }

  .anticon.anticon-close {
    background: ${palette.white};
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &.ant-select-disabled.ant-select-multiple .ant-select-selection-item {
    color: ${textColorTokens["text-default-color"]};
    opacity: 0.5;
    border-color: transparent;
    cursor: default;
  }

  &.ant-select-disabled.ant-select:not(.ant-select-customize-input)
    .ant-select-selector {
    cursor: default;
  }

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