'use client'

import type { Editor } from '@tiptap/core'
import { BlockquoteButton } from '@admin/components/custom/content-editor/tiptap-ui/blockquote-button'
import { CodeBlockButton } from '@admin/components/custom/content-editor/tiptap-ui/code-block-button'
import { ColorHighlightPopover } from '@admin/components/custom/content-editor/tiptap-ui/color-highlight-popover'
import { HeadingDropdownMenu } from '@admin/components/custom/content-editor/tiptap-ui/heading-dropdown-menu'
import { LinkPopover } from '@admin/components/custom/content-editor/tiptap-ui/link-popover'
import { ListDropdownMenu } from '@admin/components/custom/content-editor/tiptap-ui/list-dropdown-menu'
import { MarkButton } from '@admin/components/custom/content-editor/tiptap-ui/mark-button'
import { UndoRedoButton } from '@admin/components/custom/content-editor/tiptap-ui/undo-redo-button'
import { Button } from '@admin/components/ui/button'
import { Separator } from '@admin/components/ui/separator'
import { useContentEditorMediaInsertion } from '@admin/hooks/content-editor/use-content-editor-media-insertion'
import { ImagePlusIcon } from 'lucide-react'
import { HorizontalRuleButton } from './horizontal-rule-button'
import { MathPopoverButton } from './math-popover'
import { ModeToggleButton } from './mode-toggle-button'
import { TableButton } from './table-button'

export function MainToolbarContent({
  onModeChange,
  editor
}: {
  onModeChange: () => void
  editor: Editor | null
}) {
  const mediaInsertion = useContentEditorMediaInsertion({ editor })

  return (
    <>
      <div className="flex h-full min-w-0 flex-1 items-center overflow-x-auto">
        <div className="flex items-center gap-0.5">
          <UndoRedoButton action="undo" />
          <UndoRedoButton action="redo" />
        </div>

        <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />

        <div className="flex items-center gap-0.5">
          <HeadingDropdownMenu />
          <ListDropdownMenu types={['bulletList', 'orderedList', 'taskList']} />
          <BlockquoteButton />
          <CodeBlockButton />
          <HorizontalRuleButton editor={editor} />
        </div>

        <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />

        <div className="flex items-center gap-0.5">
          <MarkButton type="bold" />
          <MarkButton type="italic" />
          <MarkButton type="strike" />
          <MarkButton type="code" />
          <MarkButton type="underline" />
          <ColorHighlightPopover />
          <LinkPopover />
        </div>

        <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />

        <div className="flex items-center">
          <TableButton editor={editor} />

          <MathPopoverButton editor={editor} />

          {mediaInsertion.isVisible ? (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              data-active-state={mediaInsertion.isActive ? 'on' : 'off'}
              role="button"
              tabIndex={-1}
              disabled={!mediaInsertion.canInsert}
              data-disabled={!mediaInsertion.canInsert}
              aria-label={mediaInsertion.label}
              aria-pressed={mediaInsertion.isActive}
              title={mediaInsertion.label}
              onClick={() => {
                mediaInsertion.insertMedia()
              }}
            >
              <ImagePlusIcon />
              <span className="tiptap-button-text">Media</span>
            </Button>
          ) : null}
        </div>
      </div>

      <div className="flex shrink-0 items-center gap-0.5">
        <ModeToggleButton isSourceMode={false} onClick={onModeChange} />
      </div>
    </>
  )
}