farmcontrol-ui/src/components/Dashboard/Management/EmailTemplates/EmailTemplateDesign.jsx

import { useMemo, useRef, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel'
import InfoCollapse from '../../common/InfoCollapse'
import ViewButton from '../../common/ViewButton'
import NoteIcon from '../../../Icons/NoteIcon'
import ObjectForm from '../../common/ObjectForm'
import EditButtons from '../../common/EditButtons'
import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons'
import ActivityIndicator from '../../common/ActivityIndicator'
import ActionHandler from '../../common/ActionHandler'
import ObjectActions from '../../common/ObjectActions'
import TemplateEditor from '../../common/TemplateEditor'
import ScrollBox from '../../common/ScrollBox'
import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'

const EmailTemplateDesign = () => {
  const location = useLocation()
  const objectFormRef = useRef(null)
  const actionHandlerRef = useRef(null)
  const emailTemplateId = new URLSearchParams(location.search).get(
    'emailTemplateId'
  )
  const [collapseState, updateCollapseState] = useCollapseState(
    'EmailTemplateDesign',
    { preview: true, editor: true, notes: true }
  )
  const [formState, setFormState] = useState({
    isEditing: false,
    editLoading: false,
    formValid: false,
    activities: [],
    loading: false,
    objectData: {}
  })

  useDashboardObjectTools(
    useMemo(
      () => (
        <ObjectTableNavigationButtons
          disabled={formState.loading || formState.isEditing}
          _id={emailTemplateId}
          objectType='emailTemplate'
          showEndingDivider={false}
        />
      ),
      [emailTemplateId, formState.isEditing, formState.loading]
    )
  )

  return (
    <Flex gap='large' vertical style={{ maxHeight: '100%', minHeight: 0 }}>
      <Flex justify='space-between'>
        <Space size='middle'>
          <Space size='small'>
            <ObjectActions
              type='emailTemplate'
              pageName='info'
              id={emailTemplateId}
              disabled={formState.loading}
              visibleActions={{ edit: false }}
            />
            <ViewButton
              disabled={formState.loading}
              items={[
                { key: 'preview', label: 'Preview' },
                { key: 'editor', label: 'Editor' },
                { key: 'notes', label: 'Notes' }
              ]}
              visibleState={collapseState}
              updateVisibleState={updateCollapseState}
            />
          </Space>
          <ActivityIndicator activities={formState.activities} />
        </Space>
        <EditButtons
          isEditing={formState.isEditing}
          handleUpdate={() => actionHandlerRef.current.callAction('finishEdit')}
          cancelEditing={() =>
            actionHandlerRef.current.callAction('cancelEdit')
          }
          startEditing={() => actionHandlerRef.current.callAction('edit')}
          editLoading={formState.editLoading}
          formValid={formState.formValid}
          disabled={formState.beingEditedByOther || formState.loading}
          loading={formState.editLoading}
        />
      </Flex>
      <ScrollBox>
        <Flex vertical gap='large'>
          <ActionHandler
            actions={{
              edit: () => {
                objectFormRef.current?.startEditing()
                return false
              },
              cancelEdit: () => {
                objectFormRef.current?.cancelEditing()
                return true
              },
              finishEdit: () => {
                objectFormRef.current?.handleUpdate()
                return true
              }
            }}
            loading={formState.loading}
            ref={actionHandlerRef}
          >
            <ObjectForm
              id={emailTemplateId}
              type='emailTemplate'
              ref={objectFormRef}
              onStateChange={(state) =>
                setFormState((previous) => ({ ...previous, ...state }))
              }
            >
              {({ loading, isEditing, objectData, form, setObjectData }) => (
                <TemplateEditor
                  objectData={objectData}
                  templateType='emailTemplate'
                  subjectProperty='subject'
                  previewCapabilities={{
                    htmlOnly: true,
                    widthControl: true,
                    defaultWidth: 600
                  }}
                  loading={loading}
                  style={{ height: '72vh' }}
                  collapseState={collapseState}
                  isEditing={isEditing}
                  form={form}
                  setObjectData={setObjectData}
                />
              )}
            </ObjectForm>
          </ActionHandler>
          <InfoCollapse
            title='Notes'
            icon={<NoteIcon />}
            active={collapseState.notes}
            onToggle={(expanded) => updateCollapseState('notes', expanded)}
            collapseKey='notes'
          >
            <Spin spinning={formState.loading} indicator={<LoadingOutlined />}>
              <Card>
                <NotesPanel _id={emailTemplateId} type='emailTemplate' />
              </Card>
            </Spin>
          </InfoCollapse>
        </Flex>
      </ScrollBox>
    </Flex>
  )
}

export default EmailTemplateDesign