import * as React from 'react';
import { styled } from '@mui/material/styles';
import FormGroup from '@mui/material/FormGroup';
import Switch from '@mui/material/Switch';
import PropTypes from 'prop-types';
import { colors } from 'src/utils/colors';

const AntSwitch = styled(Switch)(({ theme }) => ({
  width: 36,
  height: 20,
  padding: 0,
  display: 'flex',
  '&:active': {
    '& .MuiSwitch-thumb': {
      width: 18,
    },
    '& .MuiSwitch-switchBase.Mui-checked': {
      transform: 'translateX(14px)',
    },
  },
  '& .MuiSwitch-switchBase': {
    padding: 2,
    color: 'var(--ds-background-100)',
    '&.Mui-checked': {
      transform: 'translateX(16px)',
      color: 'var(--ds-background-100)',
      '& + .MuiSwitch-track': {
        opacity: 1,
        backgroundColor: colors.background.switchTrackDark,
      },
    },
  },
  '& .MuiSwitch-thumb': {
    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
    width: 16,
    height: 16,
    borderRadius: 10,
    transition: theme.transitions.create(['width'], {
      duration: 200,
    }),
  },
  '& .MuiSwitch-track': {
    borderRadius: 12,
    opacity: 1,
    backgroundColor: colors.border.secondary,
    boxSizing: 'border-box',
  },
}));

export default function CustomSwitch({ id, onChange, checked, disabled = false }) {
  return (
    <FormGroup>
      <AntSwitch id={`${id}-switch`} checked={checked} onChange={onChange} disabled={disabled} />
    </FormGroup>
  );
}

CustomSwitch.propTypes = {
  id: PropTypes.string,
  onChange: PropTypes.func,
  checked: PropTypes.bool,
  disabled: PropTypes.bool,
};
