import { CodeBracketSquareIcon } from '@heroicons/react/24/solid'
import MonacoEditor from '@monaco-editor/react'
import type { Dispatch, SetStateAction } from 'react'
import { Controller } from 'react-hook-form'
import { useRemixFormContext } from 'remix-hook-form'

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

type TProperties = {
  name: string
  disabled?: boolean
  setIsPlainHTML: Dispatch<SetStateAction<boolean>>
}

// const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {
//   ssr: false,
// })

export const EditorTextArea = (properties: TProperties) => {
  const { setIsPlainHTML, name, disabled = false } = properties

  const { control } = useRemixFormContext()
  return (
    <>
      <div className="flex justify-end rounded-[5px_5px_0_0] border-x border-t border-[#D2D2D2] px-4 py-3">
        <div className="flex gap-1 px-1">
          <EditorButton
            onClick={() => setIsPlainHTML(false)}
            title="Switch to Rich Text"
          >
            <CodeBracketSquareIcon />
          </EditorButton>
        </div>
      </div>
      <Controller
        name={name}
        control={control}
        render={({ field }) => (
          <MonacoEditor
            language="html"
            onChange={(newValue) => {
              field.onChange(newValue)
            }}
            value={field.value}
            options={{
              readOnly: disabled,
              wordWrap: 'on',
            }}
            className="mb-1 h-96 max-w-none overflow-y-auto rounded-[0_0_5px_5px] border border-[#D2D2D2] p-1"
          />
        )}
      />
    </>
  )
}