farmcontrol-ui/src/components/Dashboard/common/TemplatePreview.jsx

import { useState, useContext, useEffect, useRef, useCallback } from 'react'
import PropTypes from 'prop-types'
import { Flex, Button, Input } from 'antd'
import PlusIcon from '../../Icons/PlusIcon.jsx'
import MinusIcon from '../../Icons/MinusIcon.jsx'
import InfoCircleIcon from '../../Icons/InfoCircleIcon.jsx'
import ObjectProperty from '../common/ObjectProperty.jsx'
import { ApiServerContext } from '../context/ApiServerContext.jsx'

const TemplatePreview = ({
  objectData,
  documentTemplate,
  loading,
  isEditing,
  onTestObjectOpen,
  onPreviewMessage,
  showTestObject = false
}) => {
  const iframeRef = useRef(null)
  const { fetchTemplatePreview } = useContext(ApiServerContext)
  const [previewContent, setPreviewContent] = useState('')
  const [reloadLoading, setReloadLoading] = useState(false)
  const [previewScale, setPreviewScale] = useState(1)

  const updatePreviewContent = (html) => {
    if (iframeRef.current) {
      // Save current scroll position
      const scrollY = iframeRef.current.contentWindow.scrollY
      const scrollX = iframeRef.current.contentWindow.scrollX

      // Update srcDoc
      setPreviewContent(html)

      // Restore scroll position after iframe loads new content
      const handleLoad = () => {
        iframeRef.current.contentWindow.scrollTo(scrollX, scrollY)
        iframeRef.current.removeEventListener('load', handleLoad)
      }
      iframeRef.current.addEventListener('load', handleLoad)
    }
  }

  const reloadPreview = useCallback(
    (content, testObject = {}, scale = 1) => {
      setReloadLoading(true)
      fetchTemplatePreview(
        documentTemplate._id,
        content,
        testObject,
        scale,
        (result) => {
          setReloadLoading(false)
          if (result?.error) {
            // Handle error through parent component
            onPreviewMessage(result.error, true)
          } else {
            updatePreviewContent(result.html)
            onPreviewMessage('No issues found.', false)
          }
        }
      )
    },
    [fetchTemplatePreview, objectData?._id, onPreviewMessage]
  )

  // Move useEffect to component level and use state to track objectData changes
  useEffect(() => {
    if (documentTemplate?.content) {
      reloadPreview(documentTemplate.content, objectData, previewScale)
    }
  }, [objectData, documentTemplate, previewScale, reloadPreview])

  return (
    <Flex vertical gap={'middle'} style={{ height: '100%' }}>
      <Flex gap={'small'}>
        {showTestObject == true ? (
          <>
            {documentTemplate?.objectType ? (
              <ObjectProperty
                objectType={documentTemplate?.objectType}
                name={'testObject'}
                isEditing={true}
                objectData={objectData}
                disabled={!isEditing || objectData?.global}
                type={'object'}
              />
            ) : (
              <div style={{ flexGrow: 1 }}>
                <Input disabled={true} />
              </div>
            )}
            <Button
              icon={<InfoCircleIcon />}
              disabled={objectData?.global}
              onClick={() => {
                onTestObjectOpen()
              }}
            />
          </>
        ) : null}
        <Button
          icon={<PlusIcon />}
          onClick={() => {
            setPreviewScale((prev) => prev + 0.05)
          }}
        />
        <Button
          icon={<MinusIcon />}
          onClick={() => {
            setPreviewScale((prev) => prev - 0.05)
          }}
        />
        <Button
          readOnly={true}
          style={{ width: '65px' }}
          loading={loading || reloadLoading}
          disabled={loading || reloadLoading}
          onClick={() => {
            setPreviewScale(1)
          }}
        >
          {previewScale.toFixed(2)}x
        </Button>
      </Flex>

      <iframe
        ref={iframeRef}
        srcDoc={previewContent}
        frameBorder='0'
        style={{
          width: '100%',
          flexGrow: 1,
          border: '1px solid #85858541',
          overflow: 'auto'
        }}
      />
    </Flex>
  )
}

TemplatePreview.propTypes = {
  loading: PropTypes.bool,
  objectData: PropTypes.object,
  documentTemplate: PropTypes.object,
  isEditing: PropTypes.bool,
  style: PropTypes.object,
  showTestObject: PropTypes.bool,
  onTestObjectOpen: PropTypes.func.isRequired,
  onPreviewMessage: PropTypes.func.isRequired
}

export default TemplatePreview