import { Checkbox } from '@mantine/core'
import { useEffect, useState } from 'react'

import type { BaseEditorProps } from './types'

export function CheckboxEditor({ autoFocus = true, onCancel, onCommit, onMoveNext, onMovePrev, value }: BaseEditorProps<boolean>) {
  const [checked, setChecked] = useState(Boolean(value))

  useEffect(() => {
    setChecked(Boolean(value))
  }, [value])

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault()
      onCommit(checked)
    } else if (e.key === 'Escape') {
      e.preventDefault()
      onCancel()
    } else if (e.key === 'Tab') {
      e.preventDefault()
      onCommit(checked)
      if (e.shiftKey) {
        onMovePrev?.()
      } else {
        onMoveNext?.()
      }
    } else if (e.key === ' ') {
      e.preventDefault()
      setChecked(!checked)
    }
  }

  return (
    <Checkbox
      autoFocus={autoFocus}
      checked={checked}
      onChange={(e) => setChecked(e.currentTarget.checked)}
      onKeyDown={handleKeyDown}
      size="xs"
    />
  )
}