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

import { useState } from 'react'
import PropTypes from 'prop-types'
import {
  Flex,
  Alert,
  Card,
  Spin,
  Splitter,
  Button,
  Modal,
  Segmented
} from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import ExclamationOctagonIcon from '../../Icons/ExclamationOctagonIcon.jsx'
import CheckCircleIcon from '../../Icons/CheckCircleIcon.jsx'
import ObjectProperty from '../common/ObjectProperty.jsx'
import TemplatePreview from './TemplatePreview.jsx'
import DataTree from './DataTree.jsx'

const TemplateEditor = ({
  objectData,
  loading,
  collapseState,
  isEditing,
  style
}) => {
  const [testObjectOpen, setTestObjectOpen] = useState(false)
  const [testObjectViewMode, setTestObjectViewMode] = useState('Tree')
  const [previewMessage, setPreviewMessage] = useState('No issues found.')
  const [previewError, setPreviewError] = useState(false)

  const handlePreviewMessage = (message, isError) => {
    setPreviewMessage(message)
    setPreviewError(isError)
  }

  return (
    <>
      <Splitter className={'farmcontrol-splitter'}>
        {collapseState.preview == true && (
          <Splitter.Panel style={{ height: '100%' }}>
            <Card
              spinning={loading}
              style={style}
              styles={{ body: { height: '100%' } }}
            >
              <TemplatePreview
                objectData={objectData?.testObject}
                documentTemplate={objectData}
                loading={loading}
                isEditing={isEditing}
                style={style}
                onTestObjectOpen={() => setTestObjectOpen(true)}
                onPreviewMessage={handlePreviewMessage}
                showTestObject={true}
              />
            </Card>
          </Splitter.Panel>
        )}
        {collapseState.editor == true && (
          <Splitter.Panel>
            <Spin spinning={loading} indicator={<LoadingOutlined />}>
              <Card style={style} styles={{ body: { height: '100%' } }}>
                <Flex vertical gap={'middle'} style={{ height: '100%' }}>
                  <Alert
                    message={previewMessage}
                    showIcon
                    style={{ padding: '4px 8px' }}
                    icon={
                      previewError ? (
                        <ExclamationOctagonIcon />
                      ) : (
                        <CheckCircleIcon />
                      )
                    }
                    type={previewError ? 'error' : 'success'}
                  />

                  <div
                    style={{
                      overflowY: 'scroll',
                      height: '100%',
                      flex: '1 1 auto'
                    }}
                  >
                    <ObjectProperty
                      name={'content'}
                      height='100%'
                      type='codeBlock'
                      language={'xml'}
                      objectData={objectData}
                      isEditing={isEditing}
                    />
                  </div>
                </Flex>
              </Card>
            </Spin>
          </Splitter.Panel>
        )}
      </Splitter>
      <Modal
        open={testObjectOpen}
        closeIcon={null}
        width={800}
        footer={
          <Button
            onClick={() => {
              setTestObjectOpen(false)
            }}
          >
            Close
          </Button>
        }
      >
        <Flex gap={'small'} vertical>
          <div>
            <Segmented
              options={['Tree', 'Code']}
              value={testObjectViewMode}
              onChange={(value) => setTestObjectViewMode(value)}
              size='small'
            />
          </div>
          <div
            style={{
              maxHeight: 'calc(var(--unit-100vh) - 280px)',
              overflowY: 'scroll'
            }}
          >
            {testObjectViewMode == 'Code' && (
              <ObjectProperty
                type={'codeBlock'}
                name='testObject'
                language='json'
                objectData={objectData}
                isEditing={true}
              />
            )}
            {testObjectViewMode == 'Tree' && (
              <DataTree
                data={objectData?.testObject}
                defaultExpandAll={true}
                showValueCopy={false}
                showKeyCopy={true}
              />
            )}
          </div>
        </Flex>
      </Modal>
    </>
  )
}

TemplateEditor.propTypes = {
  loading: PropTypes.bool,
  objectData: PropTypes.object,
  collapseState: PropTypes.object,
  isEditing: PropTypes.bool,
  style: PropTypes.object
}

export default TemplateEditor