import React, { useRef } from 'react'
import { Html } from '../components/html-render/task-html'
import { HtmlWithEditMode } from './baseEdit'
import { PPTEditProvider } from '../context'
import { PPTEditToolBar } from '../components/toolbar-doc'
import type { TaskArtifact } from '@/components/nova-sdk/types'
import { useLoadContent } from '../hooks/useLoadContent'
import type { ArtifactEditState } from '../types'

const HtmlDoc = ({
  taskId,
  taskArtifact,
  onStateChange,
  editable = false,
}: {
  taskId: string
  taskArtifact: TaskArtifact
  onStateChange?: (state: ArtifactEditState) => void
  editable?: boolean
}) => {
  const containerRef = useRef<HTMLDivElement>(null)
  const content = useLoadContent(taskArtifact);

  if (!editable) {
    return <Html className='h-full' content={content} />
  }
  return (
    <PPTEditProvider>
      <div className='relative h-full'>
        <PPTEditToolBar containerRef={containerRef} />
        <div className='h-full' ref={containerRef}>
          <HtmlWithEditMode taskId={taskId} taskArtifact={taskArtifact} content={content} isDoc={true} onStateChange={onStateChange}/>
        </div>
      </div>
    </PPTEditProvider>
  )
}

export const TaskHtmlDoc = React.memo(HtmlDoc)
