farmcontrol-ui/src/components/Dashboard/Production/GCodeFiles/GCodeFilePreview.jsx

import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Space, Flex, Card, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
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 EyeIcon from '../../../Icons/EyeIcon.jsx'
import ObjectForm from '../../common/ObjectForm.jsx'
import ActivityIndicator from '../../common/ActivityIndicator.jsx'
import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
import ScrollBox from '../../common/ScrollBox.jsx'
import FilePreview from '../../common/FilePreview.jsx'
import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
import { useObjectNavigationTabPage } from '../../hooks/useObjectNavigationTabPage'

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

const GCodeFilePreview = () => {
  const location = useLocation()
  const objectFormRef = useRef(null)
  const gcodeFileId = new URLSearchParams(location.search).get('gcodeFileId')
  useObjectNavigationTabPage({
    modelName: 'gcodeFile',
    pageName: 'preview',
    objectId: gcodeFileId
  })
  const [collapseState, updateCollapseState] = useCollapseState(
    'GCodeFilePreview',
    {
      preview: true,
      notes: true
    }
  )

  const [objectFormState, setEditFormState] = useState({
    loading: false,
    objectData: {},
    lock: null
  })

  const currentObjectTools = useMemo(
    () => (
      <ObjectTableNavigationButtons
        disabled={objectFormState.loading}
        _id={gcodeFileId}
        objectType='gcodeFile'
        showEndingDivider={false}
      />
    ),
    [objectFormState.loading, gcodeFileId]
  )
  useDashboardObjectTools(currentObjectTools)

  return (
    <Flex
      gap='large'
      vertical='true'
      style={{
        maxHeight: '100%',
        minHeight: 0
      }}
    >
      <Flex justify={'space-between'}>
        <Space size='middle'>
          <Space size='small'>
            <ObjectActions
              type='gcodeFile'
              pageName='info'
              id={gcodeFileId}
              disabled={objectFormState.loading}
              objectData={objectFormState.objectData}
              visibleActions={{ edit: false }}
            />
            <ViewButton
              disabled={objectFormState.loading}
              items={[
                { key: 'preview', label: 'GCode File Preview' },
                { key: 'notes', label: 'Notes' }
              ]}
              visibleState={collapseState}
              updateVisibleState={updateCollapseState}
            />
            <UserNotifierToggle
              type='gcodeFile'
              objectData={objectFormState.objectData}
              disabled={objectFormState.loading}
            />
            <DocumentPrintButton
              type='gcodeFile'
              objectData={objectFormState.objectData}
              disabled={objectFormState.loading}
            />
          </Space>
          <ActivityIndicator activities={objectFormState.activities} />
        </Space>
      </Flex>

      <ScrollBox>
        <Flex vertical gap={'large'}>
          <ObjectForm
            id={gcodeFileId}
            type='gcodeFile'
            style={{ height: '100%' }}
            ref={objectFormRef}
            onStateChange={(state) => {
              setEditFormState((prev) => ({ ...prev, ...state }))
            }}
          >
            {({ loading, objectData }) => (
              <InfoCollapse
                title='GCode File Preview'
                icon={<EyeIcon />}
                active={collapseState.preview}
                onToggle={(expanded) =>
                  updateCollapseState('preview', expanded)
                }
                collapseKey='preview'
              >
                {loading ? (
                  <InfoCollapsePlaceholder />
                ) : objectData?.file?._id ? (
                  <Card>
                    <FilePreview
                      file={objectData?.file}
                      style={{ width: '100%', height: '72vh' }}
                    />
                  </Card>
                ) : (
                  <MissingPlaceholder message={'No file.'} />
                )}
              </InfoCollapse>
            )}
          </ObjectForm>

          <InfoCollapse
            title='Notes'
            icon={<NoteIcon />}
            active={collapseState.notes}
            onToggle={(expanded) => updateCollapseState('notes', expanded)}
            collapseKey='notes'
          >
            <Spin
              spinning={objectFormState.loading}
              indicator={<LoadingOutlined />}
            >
              <Card>
              <NotesPanel _id={gcodeFileId} type='gcodeFile' />
              </Card>
            </Spin>
          </InfoCollapse>
        </Flex>
      </ScrollBox>
    </Flex>
  )
}

export default GCodeFilePreview