import React, { memo } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Switch from '@material-ui/core/Switch'

import { secondaryColor, offColor, disabledColor, disabledColor2 } from '../../styling/variables'

const useStyles = makeStyles(theme => ({
  root: {
    width: 32,
    height: 20,
    padding: 0,
    margin: theme.spacing(1)
  },
  switchBase: {
    padding: 2,
    '&$disabled': {
      color: disabledColor2,
      '& + $track': {
        backgroundColor: disabledColor,
        opacity: 1
      }
    },
    '&$checked': {
      color: theme.palette.common.white,
      '& + $track': {
        backgroundColor: secondaryColor,
        opacity: 1,
        border: 'none'
      }
    },
    '&$focusVisible $thumb': {
      border: '6px solid #fff'
    }
  },
  thumb: {
    width: 16,
    height: 16
  },
  track: {
    borderRadius: 17,
    border: 'none',
    backgroundColor: offColor,
    opacity: 1,
    transition: theme.transitions.create(['background-color', 'border'])
  },
  disabled: {
  },
  checked: {
  },
  focusVisible: {
  }
}))

const SwitchInput = memo(({ ...props }) => {
  const classes = useStyles()
  return (
    <Switch
      focusVisibleClassName={classes.focusVisible}
      disableRipple
      classes={{
        root: classes.root,
        switchBase: classes.switchBase,
        thumb: classes.thumb,
        track: classes.track,
        checked: classes.checked,
        disabled: classes.disabled
      }}
      {...props}
    />
  )
})

export default SwitchInput