/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import styled from 'styled-components';
import Switch, { SwitchProps } from '@material-ui/core/Switch';
import { getColor } from '../utils';
import { ThemeObject } from '../Theme';

const getSizeValue = (size: string) => {
  if (size === 'large')
    return {
      mainWidth: '50px',
      mainHeight: '30px',
      circleWidth: '28px',
      circleRadius: '14px',
      circleTransform: 'translateX(20px)',
    };
  if (size === 'medium')
    return {
      mainWidth: '42px',
      mainHeight: '26px',
      circleWidth: '24px',
      circleRadius: '13px',
      circleTransform: 'translateX(16px)',
    };
  return {
    mainWidth: '26px',
    mainHeight: '13px',
    circleWidth: '11px',
    circleRadius: '7px',
    circleTransform: 'translateX(13px)',
  };
};

export const StyledSwitch = styled(
  (
    props: SwitchProps & {
      $theme: ThemeObject;
      $size: 'small' | 'medium' | 'large';
      $color: keyof ThemeObject['pallet'];
      $customColor?: string;
      $circleColor?: keyof ThemeObject['pallet'];
    }
  ) => <Switch {...props} />
)`
  &&& {
    width: ${(props) => getSizeValue(props.$size).mainWidth};
    height: ${(props) => getSizeValue(props.$size).mainHeight};
    padding: 0;
    margin: 10px;
    .MuiSwitch-switchBase {
      top: 0;
      left: 0;
      padding: 1px;
    }
    .MuiSwitch-thumb {
      width: ${(props) => getSizeValue(props.$size).circleWidth};
      height: ${(props) => getSizeValue(props.$size).circleWidth};
      box-shadow: none;
    }
    .MuiSwitch-switchBase.Mui-checked {
      transform: ${(props) => getSizeValue(props.$size).circleTransform};
    }

    .MuiSwitch-track {
      border-radius: ${(props) => getSizeValue(props.$size).circleRadius};
      background: ${(props) => props.$theme.pallet.gray20};
      opacity: 1;
    }

    .MuiSwitch-colorPrimary,
    .MuiSwitch-colorSecondary,
    .MuiSwitch-colorPrimary.Mui-checked,
    .MuiSwitch-colorSecondary.Mui-checked {
      color: ${(props) => (props.$circleColor ? getColor(props.$theme, props.$circleColor) : props.$theme.pallet.white)};
    }
    .MuiSwitch-colorPrimary.Mui-checked:hover,
    .MuiSwitch-colorSecondary.Mui-checked:hover {
      background-color: rgba(0, 0, 0, 0.04);
    }

    .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track,
    .MuiSwitch-colorSecondary.Mui-checked + .MuiSwitch-track {
      background-color: ${(props) => getColor(props.$theme, props.$color, false, props.$customColor)};
    }
    .Mui-disabled {
      color: ${(props) => (props.$theme.type === 'light' ? props.$theme.pallet.gray50 : props.$theme.pallet.gray)};
    }
  }
`;
