import styled from "styled-components";
import { theme } from "data/dataMx";

interface ITextStyleProps {
  font: string;
}

interface IStylesProps {
  size?: string;
  focus?: boolean;
}

interface ItoggleWrapperProps {
  focus?: boolean;
}
export const ToggleWrapperXs = styled.div`
  display: flex;
  align-items: center;
  flex-direction: row;
  align-items: center;
  padding: 8px 8px 8px 4px;
  min-width: 60px;
  width: fit-content;
  height: 40px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 2px solid ${({ focus }: ItoggleWrapperProps) =>
    focus ? theme.tertiary100 : theme.neutral100}; 
`;
export const LabelTextXs = styled.label`
  display: inline-block;
  font-family: ${({ font }: ITextStyleProps) => font};
  font-style: normal;
  font-size: 16px;
`;

export const ToggleContainerXs = styled.label`
  position: relative;
  display: inline-block;
  width: auto;
  height: ${({ size }: IStylesProps) => (size == "xs" ? "24px" : "16px")};
  min-width:${({ size }: IStylesProps) => (size == "xs" ? "48px" : "32px")};

  input {
    opacity: 0;
    width: 0;
    height: 0;

    &:checked + span.slider,
    &:active + span.slider {
      background-color: ${({ focus }: ItoggleWrapperProps) =>
        focus ? theme.primary400 : theme.primary}
    }

    &:disabled + span.slider {
      background-color: ${theme.neutral200};
    }

    &:checked + span.slider:before {
      -webkit-transform: translateX(${({ size }: IStylesProps) =>
        size == "xs" ? "23px" : "14px"});
      -ms-transform: translateX(${({ size }: IStylesProps) =>
        size == "xs" ? "23px" : "14px"});
      transform: translateX(${({ size }: IStylesProps) =>
        size == "xs" ? "23px" : "14px"});
      background-color: ${theme.neutral100};
    }

    &:checked:disabled + span.slider:before {
      -webkit-transform: translateX(${({ size }: IStylesProps) =>
        size == "xs" ? "23px" : "14px"});
      -ms-transform: translateX(${({ size }: IStylesProps) =>
        size == "xs" ? "23px" : "14px"});
      transform: translateX(${({ size }: IStylesProps) =>
        size == "xs" ? "23px" : "14px"});
      background-color: ${theme.neutral500};
    }

    &:not(checked):disabled + span.slider:before {
      background-color: ${theme.neutral500};
    }

    &:checked:disabled:hover + span.slider {
      background-color: ${theme.neutral200};
    }

    &:checked:hover + span.slider {
      background-color: ${theme.primary300};
    }

    &:checked:focus + span.slider {
      animation-name: colorOn;
      animation-duration: 3s;

        @keyframes colorOn {
          from {
            background-color: ${theme.primary400};
            border: 1px solid ${theme.primary400};
          }
          to {
            border: 1px solid ${theme.primary};
            background-color: ${theme.primary};
          }
        }
    }

    &:disabled + span.slider {
      border: 1px solid ${theme.neutral400};
    }

    &:not(:checked):focus + span.slider {
      
      animation-name: colorBorderOFF;
      animation-duration: 3s;

        @keyframes colorBorderOFF {
          from {border: 1px solid ${theme.primary400};}
          to {border: 1px solid ${theme.primary};}
        }
      

      &:before {
        position: absolute;
        content: "";
        height: ${({ size }: IStylesProps) => (size == "xs" ? "20px" : "12px")};
        width: ${({ size }: IStylesProps) => (size == "xs" ? "20px" : "12px")};
        left: 2px;
        bottom: 1px;
        
        -webkit-transition: .5s;
        transition: 1s;
        border-radius: 34px;

        animation-name: colorCircleOff;
        animation-duration: 3s;

        @keyframes colorCircleOff {
          from {background-color: ${theme.primary400};}
          to {background-color: ${theme.primary};}
        }
      }
    }
  }

  span.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: ${theme.neutral100};
    border: 1px solid ${theme.primary};

    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 34px;
    
    &:hover {
      border: 1px solid ${theme.primary300};
      
      &:before {
        position: absolute;
        content: "";
        height: ${({ size }: IStylesProps) => (size == "xs" ? "20px" : "12px")};
        width: ${({ size }: IStylesProps) => (size == "xs" ? "20px" : "12px")};
        left: 2px;
        bottom: 1px;
        
        background-color: ${theme.primary300};
        -webkit-transition: .5s;
        transition: .5s;
        border-radius: 34px;
      }
    }

    &:not(:hover) {
      border: 1px solid ${({ focus }: ItoggleWrapperProps) =>
        focus ? theme.primary400 : theme.primary};
      
      &:before {
        position: absolute;
        content: "";
        height: ${({ size }: IStylesProps) => (size == "xs" ? "20px" : "12px")};
        width: ${({ size }: IStylesProps) => (size == "xs" ? "20px" : "12px")};
        left: 2px;
        bottom: 1px;
        
        background-color: ${({ focus }: ItoggleWrapperProps) =>
          focus ? theme.primary400 : theme.primary};
        -webkit-transition: .5s;
        transition: .5s;
        border-radius: 34px;
      }
    }

  }
`;

export const StatusText = styled.span`
  vertical-align: middle;
  font-family: ${({ font }: ITextStyleProps) => font};
  margin-left: 5px;
`;
