farmcontrol-ui/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx

import { useState, useRef } from 'react'
import { useLocation } from 'react-router-dom'
import { Space, Flex, Card } from 'antd'
import loglevel from 'loglevel'
import config from '../../../../config.js'
import useCollapseState from '../../hooks/useCollapseState.jsx'
import NotesPanel from '../../common/NotesPanel.jsx'
import InfoCollapse from '../../common/InfoCollapse.jsx'
import ViewButton from '../../common/ViewButton.jsx'
import NoteIcon from '../../../Icons/NoteIcon.jsx'
import ObjectForm from '../../common/ObjectForm.jsx'
import EditButtons from '../../common/EditButtons.jsx'
import ActivityIndicator from '../../common/ActivityIndicator.jsx'
import ActionHandler from '../../common/ActionHandler.jsx'
import ObjectActions from '../../common/ObjectActions.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'

import TemplateEditor from '../../common/TemplateEditor.jsx'

const log = loglevel.getLogger('DocumentTemplateDesign')
log.setLevel(config.logLevel)

const DocumentTemplateDesign = () => {
  const location = useLocation()
  const objectFormRef = useRef(null)
  const actionHandlerRef = useRef(null)
  const documentTemplateId = new URLSearchParams(location.search).get(
    'documentTemplateId'
  )
  const [collapseState, updateCollapseState] = useCollapseState(
    'DocumentTemplateDesign',
    {
      preview: true,
      editor: true,
      notes: true,
      auditLogs: false
    }
  )

  const [objectFormState, setEditFormState] = useState({
    isEditing: false,
    editLoading: false,
    formValid: false,
    activities: [],
    loading: false,
    objectData: {}
  })

  const actions = {
    edit: () => {
      objectFormRef?.current.startEditing()
      return false
    },
    cancelEdit: () => {
      objectFormRef?.current.cancelEditing()
      return true
    },
    finishEdit: () => {
      objectFormRef?.current.handleUpdate()
      return true
    }
  }

  return (
    <Flex
      gap='large'
      vertical='true'
      style={{
        maxHeight: '100%',
        minHeight: 0
      }}
    >
      <Flex justify={'space-between'}>
        <Space size='middle'>
          <Space size='small'>
            <ObjectActions
              type='documentTemplate'
              id={documentTemplateId}
              disabled={objectFormState.loading}
              visibleActions={{ edit: false }}
            />
            <ViewButton
              disabled={objectFormState.loading}
              items={[
                {
                  key: 'preview',
                  label: 'Preview'
                },
                {
                  key: 'editor',
                  label: 'Editor'
                },
                { key: 'notes', label: 'Notes' },
                { key: 'auditLogs', label: 'Audit Logs' }
              ]}
              visibleState={collapseState}
              updateVisibleState={updateCollapseState}
            />
          </Space>
          <ActivityIndicator activities={objectFormState.activities} />
        </Space>
        <Space>
          <EditButtons
            isEditing={objectFormState.isEditing}
            handleUpdate={() => {
              actionHandlerRef.current.callAction('finishEdit')
            }}
            cancelEditing={() => {
              actionHandlerRef.current.callAction('cancelEdit')
            }}
            startEditing={() => {
              actionHandlerRef.current.callAction('edit')
            }}
            editLoading={objectFormState.editLoading}
            formValid={objectFormState.formValid}
            disabled={objectFormState.beingEditedByOther || objectFormState.loading}
            loading={objectFormState.editLoading}
          />
        </Space>
      </Flex>

      <ScrollBox>
        <Flex vertical gap={'large'}>
          <ActionHandler
            actions={actions}
            loading={objectFormState.loading}
            ref={actionHandlerRef}
          >
            <ObjectForm
              id={documentTemplateId}
              type='documentTemplate'
              style={{ height: '100%' }}
              ref={objectFormRef}
              onStateChange={(state) => {
                setEditFormState((prev) => ({ ...prev, ...state }))
              }}
            >
              {({ loading, isEditing, objectData }) => {
                return (
                  <TemplateEditor
                    objectData={objectData}
                    loading={loading}
                    style={{ height: '72vh' }}
                    collapseState={collapseState}
                    isEditing={isEditing}
                  />
                )
              }}
            </ObjectForm>
          </ActionHandler>
          <InfoCollapse
            title='Notes'
            icon={<NoteIcon />}
            active={collapseState.notes}
            onToggle={(expanded) => updateCollapseState('notes', expanded)}
            collapseKey='notes'
          >
            <Card>
              <NotesPanel _id={documentTemplateId} type='documentTemplate' />
            </Card>
          </InfoCollapse>
        </Flex>
      </ScrollBox>
    </Flex>
  )
}

export default DocumentTemplateDesign