'use client'

import * as React from 'react'
import type { Editor } from '@tiptap/core'
import { insertContentEditorTable } from '@admin/utils/editor/insert-content-editor-table'
import { normalizeCount } from '@admin/utils/editor/table-input'

const DEFAULT_TABLE_ROWS = 3
const DEFAULT_TABLE_COLS = 3
const MIN_TABLE_ROWS = 2
const MIN_TABLE_COLS = 1

interface UseTableButtonOptions {
  disabled?: boolean
  editor?: Editor | null
  onInsertTable?: (size: { cols: number; rows: number }) => void
}

export function useTableButton({ disabled, editor, onInsertTable }: UseTableButtonOptions) {
  const [isOpen, setIsOpen] = React.useState(false)
  const [rows, setRows] = React.useState(String(DEFAULT_TABLE_ROWS))
  const [cols, setCols] = React.useState(String(DEFAULT_TABLE_COLS))
  const rowsId = React.useId()
  const colsId = React.useId()
  const canInsert = Boolean(onInsertTable || editor?.isEditable)
  const isDisabled = disabled || !canInsert

  const closePopover = React.useCallback(() => {
    setIsOpen(false)
    window.setTimeout(() => setIsOpen(false), 0)
  }, [])

  const insertTable = React.useCallback(() => {
    if (isDisabled) return

    const rowCount = normalizeCount(rows, DEFAULT_TABLE_ROWS, MIN_TABLE_ROWS)
    const colCount = normalizeCount(cols, DEFAULT_TABLE_COLS, MIN_TABLE_COLS)

    if (onInsertTable) {
      onInsertTable({ cols: colCount, rows: rowCount })
      closePopover()
      return
    }

    if (!editor) return

    insertContentEditorTable(editor, rowCount, colCount)
    closePopover()
  }, [closePopover, cols, editor, isDisabled, onInsertTable, rows])

  const handleKeyDown = React.useCallback(
    (event: React.KeyboardEvent<HTMLDivElement>) => {
      if (event.key !== 'Enter') return

      event.preventDefault()
      event.stopPropagation()
      insertTable()
    },
    [insertTable]
  )

  const handleRowsChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    setRows(event.target.value)
  }, [])

  const handleColsChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    setCols(event.target.value)
  }, [])

  return {
    cols,
    colsId,
    handleColsChange,
    handleKeyDown,
    handleRowsChange,
    insertTable,
    isDisabled,
    isOpen,
    minCols: MIN_TABLE_COLS,
    minRows: MIN_TABLE_ROWS,
    rows,
    rowsId,
    setIsOpen
  }
}