import styled from 'styled-components';
import { getColorAlias, getSpacing, getDarkenColor, getFontSize } from '../../utils/index.js';

const ToggleWrapper = styled.div `
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 30px;
  &:focus-within {
    border-radius: 15px;
    box-shadow: 0 0 0 2px ${getColorAlias('focusOuter')};
  }
`;
const ToggleSlider = styled.span `
  position: absolute;
  cursor: pointer;
  width: 48px;
  height: 24px;
  background-color: ${getColorAlias('interactiveForm')};
  transition: background-color 0.4s linear;
  border-radius: ${(props) => props.theme.radius.roundedC};
  svg {
    opacity: 0;
    position: absolute;
    fill: ${getColorAlias('interactiveBrand')};
    top: ${getSpacing('s01')};
    left: ${getSpacing('s01')};
  }
  &:before {
    position: absolute;
    content: '';
    top: 2px;
    left: 2px;
    height: 20px;
    width: 20px;
    background-color: ${getColorAlias('interactiveLight')};
    border-radius: ${(props) => props.theme.radius.roundedE};
    box-shadow: ${(props) => props.theme.elevation.e1};
    transition: 0.4s;
  }
`;
const ToggleInput = styled.input `
  opacity: 0;
  width: 0;
  height: 0;
  &:hover + ${ToggleSlider} {
    background-color: ${getDarkenColor('hover01', 'interactiveForm')};
  }
  &:focus + ${ToggleSlider} {
    background-color: ${getColorAlias('interactiveForm')};
  }
  &:active + ${ToggleSlider} {
    background-color: ${getDarkenColor('active01', 'interactiveForm')};
  }
  &:checked + ${ToggleSlider} {
    background-color: ${getColorAlias('interactiveBrand')};
    transition: background-color 0.4s linear;
    svg {
      opacity: 1;
      transform: translateX(24px);
      transition-property: opacity, transform, fill;
      transition-duration: 0.4s;
    }
    &:hover {
      background-color: ${getDarkenColor('hover01', 'interactiveBrand')};
      svg {
        fill: ${getDarkenColor('hover01', 'interactiveBrand')};
      }
    }
    &:active {
      background-color: ${getDarkenColor('active01', 'interactiveBrand')};
      svg {
        fill: ${getDarkenColor('active01', 'interactiveBrand')};
      }
    }
  }
  &:checked + ${ToggleSlider}:before {
    transform: translateX(24px);
  }
  &:disabled + ${ToggleSlider} {
    background-color: ${getColorAlias('disabled01')};
    cursor: not-allowed;
    svg {
      fill: ${getColorAlias('disabled01')};
    }
    &:before {
      background-color: ${getColorAlias('contentLight')};
    }
  }
  &:disabled:hover + ${ToggleSlider} {
    background-color: ${getColorAlias('disabled01')};
    svg {
      fill: ${getColorAlias('disabled01')};
    }
  }
`;
const ToggleLabel = styled.span `
  ${getFontSize('size16')};
  color: ${getColorAlias('contentDefault')};
  margin-right: ${getSpacing('s02')};
  height: ${getSpacing('s05')};
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
`;
const Wrapper = styled.label `
  display: flex;
  justify-content: center;
  align-items: center;
`;

export { ToggleInput, ToggleLabel, ToggleSlider, ToggleWrapper, Wrapper };
