import React from 'react'
import { useLocation } from 'react-router-dom'
import { Space, Flex, Card } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
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 EditObjectForm from '../../common/EditObjectForm'
import EditButtons from '../../common/EditButtons'
import LockIndicator from '../../common/LockIndicator.jsx'
import PrinterJobsTree from '../../common/PrinterJobsTree'
import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
import NoteIcon from '../../../Icons/NoteIcon.jsx'
import PrinterIcon from '../../../Icons/PrinterIcon.jsx'
import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
import ActionHandler from '../../common/ActionHandler'
import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'

const PrinterInfo = () => {
  const location = useLocation()
  const printerId = new URLSearchParams(location.search).get('printerId')
  const [collapseState, updateCollapseState] = useCollapseState('PrinterInfo', {
    info: true,
    jobs: true,
    notes: true,
    auditLogsParent: true,
    auditLogsOwner: true
  })

  return (
    <EditObjectForm
      id={printerId}
      type='printer'
      style={{ height: 'calc(var(--unit-100vh) - 155px)', minHeight: 0 }}
    >
      {({
        loading,
        isEditing,
        startEditing,
        cancelEditing,
        handleUpdate,
        formValid,
        objectData,
        editLoading,
        lock,
        fetchObject
      }) => {
        // Define actions for ActionHandler
        const actions = {
          reload: () => {
            fetchObject()
            return true
          },
          edit: () => {
            startEditing()
            return false
          },
          cancelEdit: () => {
            cancelEditing()
            return true
          },
          finishEdit: () => {
            handleUpdate()
            return true
          }
        }

        return (
          <ActionHandler actions={actions} loading={loading}>
            {({ callAction }) => (
              <Flex
                gap='large'
                vertical='true'
                style={{ height: '100%', minHeight: 0 }}
              >
                <Flex justify={'space-between'}>
                  <Space size='middle'>
                    <Space size='small'>
                      <ObjectActions
                        type='printer'
                        id={printerId}
                        disabled={loading}
                      />
                      <ViewButton
                        disabled={loading}
                        items={[
                          { key: 'info', label: 'Printer Information' },
                          { key: 'jobs', label: 'Printer Jobs' },
                          { key: 'notes', label: 'Notes' },
                          {
                            key: 'auditLogsParent',
                            label: 'Audit Logs (By Parent)'
                          },
                          {
                            key: 'auditLogsOwner',
                            label: 'Audit Logs (By Owner)'
                          }
                        ]}
                        visibleState={collapseState}
                        updateVisibleState={updateCollapseState}
                      />
                    </Space>
                    <LockIndicator lock={lock} />
                  </Space>
                  <Space>
                    <EditButtons
                      isEditing={isEditing}
                      handleUpdate={() => {
                        callAction('finishEdit')
                      }}
                      cancelEditing={() => {
                        callAction('cancelEdit')
                      }}
                      startEditing={() => {
                        callAction('edit')
                      }}
                      editLoading={editLoading}
                      formValid={formValid}
                      disabled={lock?.locked || loading}
                      loading={editLoading}
                    />
                  </Space>
                </Flex>

                <div style={{ height: '100%', overflow: 'auto' }}>
                  <Flex vertical gap={'large'}>
                    <InfoCollapse
                      title='Printer Information'
                      icon={<InfoCircleIcon />}
                      active={collapseState.info}
                      onToggle={(expanded) =>
                        updateCollapseState('info', expanded)
                      }
                      collapseKey='info'
                    >
                      <ObjectInfo
                        loading={loading}
                        indicator={<LoadingOutlined />}
                        isEditing={isEditing}
                        type='printer'
                        objectData={objectData}
                      />
                    </InfoCollapse>

                    <InfoCollapse
                      title='Printer Jobs'
                      icon={<PrinterIcon />}
                      active={collapseState.jobs}
                      onToggle={(expanded) =>
                        updateCollapseState('jobs', expanded)
                      }
                      collapseKey='jobs'
                    >
                      <PrinterJobsTree
                        subJobs={objectData?.subJobs}
                        loading={loading}
                      />
                    </InfoCollapse>

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

                    <InfoCollapse
                      title='Audit Logs (By Parent)'
                      icon={<AuditLogIcon />}
                      active={collapseState.auditLogsParent}
                      onToggle={(expanded) =>
                        updateCollapseState('auditLogsParent', expanded)
                      }
                      collapseKey='auditLogs'
                    >
                      {loading ? (
                        <InfoCollapsePlaceholder />
                      ) : (
                        <ObjectTable
                          type='auditLog'
                          masterFilter={{ 'parent._id': printerId }}
                          visibleColumns={{ _id: false, 'parent._id': false }}
                        />
                      )}
                    </InfoCollapse>
                    <InfoCollapse
                      title='Audit Logs (By Owner)'
                      icon={<AuditLogIcon />}
                      active={collapseState.auditLogsOwner}
                      onToggle={(expanded) =>
                        updateCollapseState('auditLogsOwner', expanded)
                      }
                      collapseKey='auditLogs'
                    >
                      {loading ? (
                        <InfoCollapsePlaceholder />
                      ) : (
                        <ObjectTable
                          type='auditLog'
                          masterFilter={{ 'owner._id': printerId }}
                          visibleColumns={{ _id: false, 'owner._id': false }}
                        />
                      )}
                    </InfoCollapse>
                  </Flex>
                </div>
              </Flex>
            )}
          </ActionHandler>
        )
      }}
    </EditObjectForm>
  )
}

export default PrinterInfo
