farmcontrol-ui/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx

import { useRef, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Space, Flex, Card } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel'
import InfoCollapse from '../../common/InfoCollapse'
import ObjectInfo from '../../common/ObjectInfo'
import ViewButton from '../../common/ViewButton'
import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
import NoteIcon from '../../../Icons/NoteIcon.jsx'
import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
import EditObjectForm from '../../common/EditObjectForm'
import EditButtons from '../../common/EditButtons'
import LockIndicator from '../../common/LockIndicator.jsx'
import ActionHandler from '../../common/ActionHandler'
import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import FilamentIcon from '../../../Icons/FilamentIcon.jsx'

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

const FilamentInfo = () => {
  const location = useLocation()
  const editFormRef = useRef(null)
  const actionHandlerRef = useRef(null)
  const filamentId = new URLSearchParams(location.search).get('filamentId')
  const [collapseState, updateCollapseState] = useCollapseState(
    'FilamentInfo',
    {
      info: true,
      stocks: true,
      notes: true,
      auditLogs: true
    }
  )

  const [editFormState, setEditFormState] = useState({
    isEditing: false,
    editLoading: false,
    formValid: false,
    lock: null,
    loading: false
  })

  const actions = {
    reload: () => {
      editFormRef?.current?.fetchObject?.()
      return true
    },
    edit: () => {
      editFormRef?.current?.startEditing?.()
      return false
    },
    cancelEdit: () => {
      editFormRef?.current?.cancelEditing?.()
      return true
    },
    finishEdit: () => {
      editFormRef?.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='filament'
                id={filamentId}
                disabled={editFormState.loading}
              />
              <ViewButton
                disabled={editFormState.loading}
                items={[
                  { key: 'info', label: 'Filament Information' },
                  { key: 'stocks', label: 'Filament Stocks' },
                  { key: 'notes', label: 'Notes' },
                  { key: 'auditLogs', label: 'Audit Logs' }
                ]}
                visibleState={collapseState}
                updateVisibleState={updateCollapseState}
              />
            </Space>
            <LockIndicator lock={editFormState.lock} />
          </Space>
          <Space>
            <EditButtons
              isEditing={editFormState.isEditing}
              handleUpdate={() => {
                actionHandlerRef.current.callAction('finishEdit')
              }}
              cancelEditing={() => {
                actionHandlerRef.current.callAction('cancelEdit')
              }}
              startEditing={() => {
                actionHandlerRef.current.callAction('edit')
              }}
              editLoading={editFormState.editLoading}
              formValid={editFormState.formValid}
              disabled={editFormState.lock?.locked || editFormState.loading}
              loading={editFormState.editLoading}
            />
          </Space>
        </Flex>

        <div style={{ height: '100%', overflowY: 'scroll' }}>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
              loading={editFormState.loading}
              ref={actionHandlerRef}
            >
              <InfoCollapse
                title='Filament Information'
                icon={<InfoCircleIcon />}
                active={collapseState.info}
                onToggle={(expanded) => updateCollapseState('info', expanded)}
                collapseKey='info'
              >
                <EditObjectForm
                  id={filamentId}
                  type='filament'
                  style={{ height: '100%' }}
                  ref={editFormRef}
                  onStateChange={(state) => {
                    setEditFormState((prev) => ({ ...prev, ...state }))
                  }}
                >
                  {({ loading, isEditing, objectData }) => {
                    return (
                      <ObjectInfo
                        loading={loading}
                        indicator={<LoadingOutlined />}
                        isEditing={isEditing}
                        type='filament'
                        objectData={objectData}
                      />
                    )
                  }}
                </EditObjectForm>
              </InfoCollapse>
            </ActionHandler>

            <InfoCollapse
              title='Filament Stocks'
              icon={<FilamentIcon />}
              active={collapseState.stocks}
              onToggle={(expanded) => updateCollapseState('stocks', expanded)}
              collapseKey='stocks'
            >
              {editFormState.loading ? (
                <InfoCollapsePlaceholder />
              ) : (
                <ObjectTable
                  type='filamentStock'
                  masterFilter={{ 'filament._id': filamentId }}
                  visibleColumns={{
                    filament: false,
                    'filament._id': false,
                    startingWeight: false
                  }}
                />
              )}
            </InfoCollapse>

            <InfoCollapse
              title='Notes'
              icon={<NoteIcon />}
              active={collapseState.notes}
              onToggle={(expanded) => updateCollapseState('notes', expanded)}
              collapseKey='notes'
            >
              <Card>
                <NotesPanel _id={filamentId} type='filament' />
              </Card>
            </InfoCollapse>

            <InfoCollapse
              title='Audit Logs'
              icon={<AuditLogIcon />}
              active={collapseState.auditLogs}
              onToggle={(expanded) =>
                updateCollapseState('auditLogs', expanded)
              }
              collapseKey='auditLogs'
            >
              {editFormState.loading ? (
                <InfoCollapsePlaceholder />
              ) : (
                <ObjectTable
                  type='auditLog'
                  masterFilter={{ 'parent._id': filamentId }}
                  visibleColumns={{ _id: false, 'parent._id': false }}
                />
              )}
            </InfoCollapse>
          </Flex>
        </div>
      </Flex>
    </>
  )
}

export default FilamentInfo