'use client'

import type { ContentEditorTableAddControls } from '@admin/hooks/content-editor/use-content-editor-table-add-controls'
import { Button } from '@admin/components/ui/button'
import { PlusIcon } from 'lucide-react'
import { createPortal } from 'react-dom'

interface TableAddControlsProps {
  controls: ContentEditorTableAddControls | null
}

export function TableAddControls({ controls }: TableAddControlsProps) {
  if (!controls) return null

  return createPortal(
    <div className="not-prose contents" contentEditable={false}>
      <Button
        aria-label="Add table column"
        className="group absolute top-0 right-0 bottom-6 z-[1] inline-flex h-auto w-4 shrink-0 cursor-pointer items-center justify-center rounded-none border border-border bg-muted/80 p-0 whitespace-nowrap transition-colors outline-none select-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50"
        onClick={controls.addColumn}
        onPointerDown={(event) => event.preventDefault()}
        title="Add table column"
        type="button"
        variant="outline"
      >
        <span className="pointer-events-none inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-border bg-input text-foreground transition-colors group-hover:bg-secondary group-focus-visible:bg-secondary">
          <PlusIcon aria-hidden="true" />
        </span>
      </Button>
      <Button
        aria-label="Add table row"
        className="group absolute right-6 bottom-0 left-0 z-[1] inline-flex h-4 w-auto shrink-0 cursor-pointer items-center justify-center rounded-none border border-border bg-muted/80 p-0 whitespace-nowrap transition-colors outline-none select-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50"
        onClick={controls.addRow}
        onPointerDown={(event) => event.preventDefault()}
        title="Add table row"
        type="button"
        variant="outline"
      >
        <span className="pointer-events-none inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-border bg-input text-foreground transition-colors group-hover:bg-secondary group-focus-visible:bg-secondary">
          <PlusIcon aria-hidden="true" />
        </span>
      </Button>
    </div>,
    controls.wrapper
  )
}