import {
  ArrowUturnLeftIcon,
  ArrowUturnRightIcon,
  Bars3BottomLeftIcon,
  Bars3BottomRightIcon,
  Bars3Icon,
  Bars4Icon,
  BoldIcon,
  CodeBracketIcon,
  DocumentTextIcon,
  H1Icon,
  H2Icon,
  H3Icon,
  ItalicIcon,
  LinkIcon,
  LinkSlashIcon,
  ListBulletIcon,
  MoonIcon,
  NumberedListIcon,
  PhotoIcon,
  StrikethroughIcon,
  SunIcon,
  SwatchIcon,
} from '@heroicons/react/20/solid'
import type { Editor } from '@tiptap/react'
import {
  type SetStateAction,
  type Dispatch,
  useState,
  useRef,
  useCallback,
} from 'react'
import { HexColorInput, HexColorPicker } from 'react-colorful'

import { useClickOutside } from '~/hooks/use-click-outside'
import { isHexCompatible, rgbToHex } from '~/utils/color'

import { EditorButton } from './editor-button'

type TProperties = {
  editor: Editor | null
  setIsPlainHTML: Dispatch<SetStateAction<boolean>>
  category: string
  darkMode: boolean
  setDarkMode: Dispatch<SetStateAction<boolean>>
  disabled?: boolean
}

export const EditorMenuBar = (properties: TProperties) => {
  const {
    editor,
    setIsPlainHTML,
    // category,
    darkMode,
    setDarkMode,
    disabled = false,
  } = properties
  // const [isOpenImage, setIsOpenImage] = useState(false)
  const [isOpenColor, setIsOpenColor] = useState(false)
  const popover = useRef<HTMLDivElement>(null)
  const close = useCallback(() => setIsOpenColor(false), [])

  useClickOutside(popover, close)

  const setLink = useCallback(() => {
    const previousUrl = editor?.getAttributes('link').href
    const url = globalThis.prompt('URL', previousUrl)

    // cancelled
    if (url === null) {
      return
    }

    // empty
    if (url === '') {
      editor?.chain().focus().extendMarkRange('link').unsetLink().run()

      return
    }

    // update link
    editor?.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
  }, [editor])

  if (!editor) {
    return
  }

  const addImage = (url: string) => {
    if (url) {
      editor.chain().focus().setImage({ src: url }).run()
    }
  }

  const currentColor: string = editor.getAttributes('textStyle').color
  const rgbColor = isHexCompatible(currentColor)
    ? currentColor
    : rgbToHex(currentColor)
  const handleChangeColor = (selectedColor: string) => {
    if (selectedColor.length === 7) {
      editor.chain().focus().setColor(selectedColor).run()
    }
  }

  const uploadEnabled = false
  const toggleUpload = () => {
    if (uploadEnabled) {
      // setIsOpenImage(true)
    } else {
      const urlImage = globalThis.prompt('URL')
      if (urlImage) {
        addImage(urlImage)
      }
    }
  }

  const toggleDark = () => {
    setDarkMode(!darkMode)
    // localStorage.setItem(editorKey, JSON.stringify(!darkMode))
  }

  return (
    <>
      <div className="flex items-start justify-between gap-4 rounded-[5px_5px_0_0] px-4 py-3">
        <div className="flex divide-x">
          <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
            <EditorButton
              onClick={() => editor.chain().focus().toggleBold().run()}
              disabled={
                disabled || !editor.can().chain().focus().toggleBold().run()
              }
              isActive={editor.isActive('bold')}
              title="Bold"
            >
              <BoldIcon />
            </EditorButton>
            <EditorButton
              onClick={() => editor.chain().focus().toggleItalic().run()}
              disabled={
                disabled || !editor.can().chain().focus().toggleItalic().run()
              }
              isActive={editor.isActive('italic')}
              title="Italic"
            >
              <ItalicIcon />
            </EditorButton>
            <EditorButton
              onClick={() => editor.chain().focus().toggleStrike().run()}
              disabled={
                disabled || !editor.can().chain().focus().toggleStrike().run()
              }
              isActive={editor.isActive('strike')}
              title="Strike"
            >
              <StrikethroughIcon />
            </EditorButton>
            <div className="relative">
              <EditorButton
                onClick={() => setIsOpenColor(true)}
                title="Text Color"
                style={{
                  color: rgbColor,
                }}
                isActive={true}
                disabled={disabled}
              >
                <SwatchIcon />
              </EditorButton>
              {isOpenColor && (
                <div
                  className="border-md absolute top-8 left-0"
                  ref={popover}
                >
                  <HexColorPicker
                    className="z-10"
                    color={rgbColor}
                    onChange={handleChangeColor}
                  />
                  <div className="">
                    <HexColorInput
                      color={rgbColor}
                      onChange={handleChangeColor}
                      prefixed
                      className="relative z-10 mt-1 flex w-full rounded-lg border px-3 py-2 text-sm focus:ring-0 focus-visible:outline-0"
                    />
                  </div>
                </div>
              )}
            </div>
            <EditorButton
              onClick={() => editor.chain().focus().setTextAlign('left').run()}
              disabled={
                disabled ||
                !editor.can().chain().focus().setTextAlign('left').run()
              }
              isActive={editor.isActive({ textAlign: 'left' })}
              title="Align Left"
            >
              <Bars3BottomLeftIcon />
            </EditorButton>
            <EditorButton
              onClick={() =>
                editor.chain().focus().setTextAlign('center').run()
              }
              disabled={
                disabled ||
                !editor.can().chain().focus().setTextAlign('center').run()
              }
              isActive={editor.isActive({ textAlign: 'center' })}
              title="Align Center"
            >
              <Bars3Icon />
            </EditorButton>
            <EditorButton
              onClick={() => editor.chain().focus().setTextAlign('right').run()}
              disabled={
                disabled ||
                !editor.can().chain().focus().setTextAlign('right').run()
              }
              isActive={editor.isActive({ textAlign: 'right' })}
              title="Align Right"
            >
              <Bars3BottomRightIcon />
            </EditorButton>
            <EditorButton
              onClick={() =>
                editor.chain().focus().setTextAlign('justify').run()
              }
              disabled={
                disabled ||
                !editor.can().chain().focus().setTextAlign('justify').run()
              }
              isActive={editor.isActive({ textAlign: 'justify' })}
              title="Align Justify"
            >
              <Bars4Icon />
            </EditorButton>
          </div>
          <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
            <EditorButton
              onClick={() =>
                editor.chain().focus().toggleHeading({ level: 1 }).run()
              }
              isActive={editor.isActive('heading', { level: 1 })}
              title="Heading 1"
              disabled={disabled}
            >
              <H1Icon />
            </EditorButton>
            <EditorButton
              onClick={() =>
                editor.chain().focus().toggleHeading({ level: 2 }).run()
              }
              isActive={editor.isActive('heading', { level: 2 })}
              title="Heading 2"
              disabled={disabled}
            >
              <H2Icon />
            </EditorButton>
            <EditorButton
              onClick={() =>
                editor.chain().focus().toggleHeading({ level: 3 }).run()
              }
              isActive={editor.isActive('heading', { level: 3 })}
              title="Heading 3"
              disabled={disabled}
            >
              <H3Icon />
            </EditorButton>
            {/* <EditorButton
              onClick={() => editor.chain().focus().setParagraph().run()}
              isActive={editor.isActive('paragraph')}
              title="Paragraph"
              disabled={disabled}
            >
              <RiParagraph />
            </EditorButton> */}
            <EditorButton
              onClick={() => editor.chain().focus().toggleBulletList().run()}
              isActive={editor.isActive('bulletList')}
              title="Bullet List"
              disabled={disabled}
            >
              <ListBulletIcon />
            </EditorButton>
            <EditorButton
              onClick={() => editor.chain().focus().toggleOrderedList().run()}
              isActive={editor.isActive('orderedList')}
              title="Ordered List"
              disabled={disabled}
            >
              <NumberedListIcon />
            </EditorButton>
            <EditorButton
              onClick={() => editor.chain().focus().toggleCodeBlock().run()}
              isActive={editor.isActive('codeBlock')}
              title="Code Block"
              disabled={disabled}
            >
              <CodeBracketIcon />
            </EditorButton>
          </div>
          {/* <div className="flex items-start gap-1 px-1">
            <EditorButton
              onClick={() => editor.chain().focus().toggleBlockquote().run()}
              isActive={editor.isActive('blockquote')}
              title="Blockquote"
              disabled={disabled}
            >
              <RiDoubleQuotesL />
            </EditorButton>
            <EditorButton
              onClick={() => editor.chain().focus().setHorizontalRule().run()}
              title="Horizontal Rule"
              disabled={disabled}
            >
              <RiSeparator />
            </EditorButton>
          </div> */}
          {/* <div className="flex items-start gap-1 px-1">
            <EditorButton
              onClick={() => editor.chain().focus().setHardBreak().run()}
              title="Hard Break"
              disabled={disabled}
            >
              <RiTextWrap />
            </EditorButton>
            <EditorButton
              onClick={() => {
                editor.chain().focus().unsetAllMarks().run()
                editor.chain().focus().clearNodes().run()
              }}
              title="Clear Format"
              disabled={disabled}
            >
              <RiFormatClear />
            </EditorButton>
          </div> */}
          <div className="flex items-start gap-1 px-1">
            <EditorButton
              onClick={() => toggleUpload()}
              title="Insert Image"
              disabled={disabled}
            >
              <PhotoIcon />
            </EditorButton>
            <EditorButton
              onClick={() => setLink()}
              disabled={
                disabled ||
                !editor
                  .can()
                  .chain()
                  .focus()
                  .extendMarkRange('link')
                  .setLink({ href: '' })
                  .run()
              }
              isActive={editor.isActive('link')}
              title="Set Link"
            >
              <LinkIcon />
            </EditorButton>
            <EditorButton
              onClick={() => editor.chain().focus().unsetLink().run()}
              disabled={disabled || !editor.isActive('link')}
              title="Unset Link"
            >
              <LinkSlashIcon />
            </EditorButton>
          </div>
          <div className="flex items-start gap-1 px-1">
            <EditorButton
              onClick={() => editor.chain().focus().undo().run()}
              disabled={disabled || !editor.can().chain().focus().undo().run()}
              title="Undo"
            >
              <ArrowUturnLeftIcon />
            </EditorButton>
            <EditorButton
              onClick={() => editor.chain().focus().redo().run()}
              disabled={disabled || !editor.can().chain().focus().redo().run()}
              title="Redo"
            >
              <ArrowUturnRightIcon />
            </EditorButton>
            <EditorButton
              onClick={() => toggleDark()}
              title={darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
              isActive={true}
            >
              {darkMode ? <MoonIcon /> : <SunIcon />}
            </EditorButton>
          </div>
        </div>
        <div>
          <div className="flex gap-1 px-1">
            <EditorButton
              onClick={() => setIsPlainHTML(true)}
              title="Switch to Plain Text"
              isActive={true}
            >
              <DocumentTextIcon />
            </EditorButton>
          </div>
        </div>
      </div>

      {/* <Dialog
        isOpen={isOpenImage}
        setIsOpen={setIsOpenImage}
        title="Insert Image"
        showCloseButton={true}
      >
        <UploadProvider
          data={{
            onCancel: () => setIsOpenImage(false),
            onSave: (file) => {
              addImage(file)
              setIsOpenImage(false)
            },
            category: category,
            maxFileSize: 300,
            selectedFile: '',
          }}
        >
          <Upload />
        </UploadProvider>
      </Dialog> */}
    </>
  )
}
