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

import { Button } from '~/components/ui/button'
import { useAdminContext } from '~/contexts/admin'
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
  disabled?: boolean
}

export const EditorMenuBar = (properties: TProperties) => {
  const {
    editor,
    setIsPlainHTML,
    // category,
    disabled = false,
  } = properties
  const { setIsUploadOpen, uploadedFile, setUploadedFile } = useAdminContext()
  const [isOpenImage, setIsOpenImage] = useState(false)
  const [imageUrl, setImageUrl] = useState('')
  const [isOpenColor, setIsOpenColor] = useState(false)
  const popover = useRef<HTMLDivElement>(null)
  const close = useCallback(() => {
    setIsOpenColor(false)
    setIsOpenImage(false)
    if (imageUrl) {
      addImage(imageUrl)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    if (uploadedFile) {
      addImage(uploadedFile)
      setUploadedFile(undefined)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [uploadedFile])

  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()
    }
  }

  return (
    <div className="flex items-start justify-between gap-4 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 rounded-lg shadow"
                  color={rgbColor}
                  onChange={handleChangeColor}
                />
                <div className="">
                  <HexColorInput
                    color={rgbColor}
                    onChange={handleChangeColor}
                    prefixed
                    className="relative z-10 mt-1 flex w-full rounded-lg border-0 bg-white px-3 py-2 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
                  />
                </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">
          <div className="relative">
            <EditorButton
              onClick={() => setIsOpenImage(true)}
              title="Insert Image"
              disabled={disabled}
            >
              <PhotoIcon />
            </EditorButton>
            {isOpenImage && (
              <div
                className="border-md absolute top-8 left-0 w-50"
                ref={popover}
              >
                <div className="relative">
                  <Input
                    placeholder="Masukkan URL Gambar"
                    color={rgbColor}
                    onChange={(event) => {
                      setImageUrl(event.target.value)
                    }}
                    className="z-10 flex h-[42px] w-full rounded-lg border-0 bg-white p-2 pr-8 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
                  />
                  <Button
                    type="button"
                    variant="icon"
                    size="fit"
                    className="absolute top-0 right-3 h-[42px]"
                    onClick={() => {
                      setIsUploadOpen('content')
                    }}
                  >
                    <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
                  </Button>
                </div>
              </div>
            )}
          </div>
          <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>
        </div>
      </div>
      <div>
        <div className="flex gap-1 px-1">
          <EditorButton
            onClick={() => setIsPlainHTML(true)}
            title="Switch to Plain Text"
          >
            <DocumentTextIcon />
          </EditorButton>
        </div>
      </div>
    </div>
  )
}