import { Switch, SwitchProps } from "antd";
import styled, { createGlobalStyle } from "styled-components";
import {
  controlColorTokens,
  getTextSizes,
  textLevels,
} from "../../design-system/tokens";

export const Wrapper = styled("div")`
  display: flex;
  align-items: center;
  gap: 8px;
`;

export const StyledSwitchGlobal = createGlobalStyle`
  &.ant-switch-checked {
    background-color: ${controlColorTokens["control-primary-color"]};
  }

  &.ant-switch-checked .ant-switch-handle {
  left: calc(100% - 12px - 2px);
}

&.ant-switch-handle::before {
  position: absolute;
  top: 0;
  right: 1px;
  bottom: 0;
  left: -1px;
  border-radius: 9px;
  box-shadow: 0 2px 4px 0 rgb(0 35 11 / 20%);
  transition: all 0.2s ease-in-out;
  content: "";
}

  &.ant-switch {
    &[aria-checked="false"] {
      border: 1px solid #cfcfcf;
      background-color: #f0f0f0;

      &.ant-switch-handle::before {
        background-color: #5d5d5d;
      }
    }
    &[aria-checked="true"] {
      border: 1px solid #ed9c00;
      background-color: #fda700;

      &.ant-switch-handle::before {
        background-color: #ffffff;
      }
    }
    &.ant-switch {
      width: 32px;
      height: 16px;
      ${getTextSizes(textLevels["SPAN"])};
    }

    .ant-switch-handle {
      top: 0px;
      width: 14px;
      height: 14px;
    }

  }
`;
export const StyledSwitch: typeof Switch = styled(Switch)<SwitchProps>``;