import {
  Checkbox,
  CheckboxProps,
  FormControlLabel,
  styled,
} from '@mui/material'
import { ReactNode } from 'react'

export const BpIcon = styled('span')(({}) => ({
  borderRadius: 3,
  width: 18,
  height: 18,
  marginLeft: '2px',
  border: '1px solid #CBCBCB',
  backgroundColor: '#F8F8F8',
  '.Mui-focusVisible &': {
    outline: '2px auto rgba(19,124,189,.6)',
    outlineOffset: 2,
  },
  'input:hover ~ &': {
    backgroundColor: '#F8F8F8',
  },
  'input:disabled ~ &': {
    boxShadow: 'none',
    background: 'rgba(206,217,224,.5)',
  },
}))

export const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
  backgroundColor: '#F8F8F8',
  border: `1px solid ${theme.palette.primary.main}`,
  backgroundImage:
    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
  marginLeft: '2px',
  '&:before': {
    content: '""',
    display: 'block',
    width: 8,
    height: 8,
    margin: '4px',
    left: '2px',
    background: theme.palette.primary.main,
    borderRadius: '2px',
  },
  'input:hover ~ &': {
    backgroundColor: '#F8F8F8',
  },
}))

interface Props extends CheckboxProps {
  disabled?: boolean
  label: ReactNode
  name?: string
  checked: boolean
  onChange: (e) => void
}

export default function SingleCheckbox({
  checked,
  label,
  onChange,
  ...props
}: Props) {
  return (
    <FormControlLabel
      control={
        <Checkbox
          checked={checked}
          onChange={onChange}
          checkedIcon={<BpCheckedIcon />}
          icon={<BpIcon />}
          {...props}
        />
      }
      label={label}
    />
  )
}
