import { useTheme } from 'next-themes'
import { Flex } from '../primitives'
import { styled } from '@stitches/react'

const ToggleSwitch = styled('label', {
  position: 'relative',
  display: 'inline-block',
  width: '60px',
  height: '34px',
  '& input': { opacity: 0, width: 0, height: 0 },
  '& span': {
    position: 'absolute',
    cursor: 'pointer',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#000',
    transition: '0.4s',
    borderRadius: '34px',
    border: '1px solid #39ff14',
    '&:before': {
      position: 'absolute',
      content: '""',
      height: '26px',
      width: '26px',
      left: '4px',
      bottom: '3px',
      backgroundColor: '#39ff14',
      transition: '0.4s',
      borderRadius: '50%',
    }
  },
  '& input:checked + span': {
    backgroundColor: '#39ff14',
    '&:before': {
      transform: 'translateX(26px)',
      backgroundColor: '#000',
    }
  }
})

const ThemeSwitcher = () => {
  const { theme, setTheme } = useTheme()

  return (
    <Flex align="center">
      <ToggleSwitch>
        <input
          type="checkbox"
          checked={theme === 'dark'}
          onChange={() => setTheme(theme === 'light' ? 'dark' : 'light')}
        />
        <span />
      </ToggleSwitch>
    </Flex>
  )
}

export default ThemeSwitcher