import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space, 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 ObjectInfo from '../../common/ObjectInfo.jsx'
import ViewButton from '../../common/ViewButton.jsx'
import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
import NoteIcon from '../../../Icons/NoteIcon.jsx'
import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
import ObjectForm from '../../common/ObjectForm.jsx'
import EditButtons from '../../common/EditButtons.jsx'
import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
import ActivityIndicator from '../../common/ActivityIndicator.jsx'
import ActionHandler from '../../common/ActionHandler.jsx'
import { useActions } from '../../context/ActionsContext'
import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import InfoActionButtons from '../../common/InfoActionButtons.jsx'
import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
import OrderItemsIcon from '../../../Icons/OrderItemIcon.jsx'
import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
import InvoiceIcon from '../../../Icons/InvoiceIcon.jsx'
import { getModelByName } from '../../../../database/ObjectModels.js'
import StockEventIcon from '../../../Icons/StockEventIcon.jsx'

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

const PurchaseOrderInfo = () => {
  const location = useLocation()
  const objectFormRef = useRef(null)
  const orderItemsTableRef = useRef(null)
  const shipmentsTableRef = useRef(null)
  const actionHandlerRef = useRef(null)

  const { setOnModalOk } = useActions()
  useEffect(() => {
    setOnModalOk(() => () => {
      objectFormRef.current?.handleFetchObject?.()
    })
    return () => setOnModalOk(null)
  }, [setOnModalOk])
  const purchaseOrderId = new URLSearchParams(location.search).get(
    'purchaseOrderId'
  )
  const [collapseState, updateCollapseState] = useCollapseState(
    'PurchaseOrderInfo',
    {
      info: true,
      notes: true,
      orderItems: true,
      shipments: true,
      auditLogs: false,
      invoices: true,
      stockEvents: true
    }
  )

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

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

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

  return (
    <Flex
      gap='large'
      vertical='true'
      style={{
        maxHeight: '100%',
        height: '100%',
        minHeight: 0
      }}
    >
      <Flex justify={'space-between'}>
        <Space size='small'>
          <Space size='small'>
            <ObjectActions
              type='purchaseOrder'
              pageName='info'
              id={purchaseOrderId}
              disabled={objectFormState.loading}
              objectData={objectFormState.objectData}
            />
            <ViewButton
              disabled={objectFormState.loading}
              items={[
                { key: 'info', label: 'Purchase Order Information' },
                { key: 'orderItems', label: 'Order Items' },
                { key: 'shipments', label: 'Shipments' },
                { key: 'invoices', label: 'Invoices' },
                { key: 'stockEvents', label: 'Stock Events' },
                { key: 'notes', label: 'Notes' },
                { key: 'auditLogs', label: 'Audit Logs' }
              ]}
              visibleState={collapseState}
              updateVisibleState={updateCollapseState}
            />
            <UserNotifierToggle
              type='purchaseOrder'
              objectData={objectFormState.objectData}
              disabled={objectFormState.loading}
            />
            <InfoActionButtons
              type='purchaseOrder'
              objectData={objectFormState.objectData}
              disabled={objectFormState.loading}
            />
          </Space>
          <ActivityIndicator
            activities={objectFormState.activities}
            showStartingDivider={true}
          />
        </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 ||
              objectFormState.editDisabled
            }
            loading={objectFormState.editLoading}
          />
        </Space>
      </Flex>

      <ScrollBox>
        <Flex vertical gap={'large'}>
          <ActionHandler
            actions={actions}
            loading={objectFormState.loading}
            ref={actionHandlerRef}
          >
            <ObjectForm
              id={purchaseOrderId}
              type='purchaseOrder'
              style={{ height: '100%' }}
              ref={objectFormRef}
              setCurrentObject={true}
              onStateChange={(state) => {
                setEditFormState((prev) => ({ ...prev, ...state }))
              }}
            >
              {({ loading, isEditing, objectData }) => (
                <Flex vertical gap={'large'}>
                  <InfoCollapse
                    title='Purchase Order Information'
                    icon={<InfoCircleIcon />}
                    active={collapseState.info}
                    onToggle={(expanded) =>
                      updateCollapseState('info', expanded)
                    }
                    collapseKey='info'
                  >
                    <ObjectInfo
                      loading={loading}
                      indicator={<LoadingOutlined />}
                      isEditing={isEditing}
                      type='purchaseOrder'
                      labelWidth='225px'
                      objectData={objectData}
                      visibleProperties={{
                        items: false
                      }}
                    />
                  </InfoCollapse>
                  <InfoCollapse
                    title='Purchase Order Items'
                    icon={<OrderItemsIcon />}
                    active={collapseState.orderItems}
                    onToggle={(expanded) =>
                      updateCollapseState('orderItems', expanded)
                    }
                    collapseKey='orderItems'
                  >
                    <ObjectTable
                      type='orderItem'
                      masterFilter={{
                        order:
                          getModelByName('purchaseOrder').prefix +
                          ':' +
                          purchaseOrderId,
                        orderType: 'purchaseOrder'
                      }}
                      visibleColumns={{ order: false }}
                      ref={orderItemsTableRef}
                    />
                  </InfoCollapse>
                  <InfoCollapse
                    title='Shipments'
                    icon={<ShipmentIcon />}
                    active={collapseState.shipments}
                    onToggle={(expanded) =>
                      updateCollapseState('shipments', expanded)
                    }
                    collapseKey='shipments'
                  >
                    <ObjectTable
                      type='shipment'
                      masterFilter={{
                        order:
                          getModelByName('purchaseOrder').prefix +
                          ':' +
                          purchaseOrderId,
                        orderType: 'purchaseOrder'
                      }}
                      visibleColumns={{ order: false }}
                      ref={shipmentsTableRef}
                    />
                  </InfoCollapse>
                  <InfoCollapse
                    title='Invoices'
                    icon={<InvoiceIcon />}
                    active={collapseState.invoices}
                    onToggle={(expanded) =>
                      updateCollapseState('invoices', expanded)
                    }
                    collapseKey='invoices'
                  >
                    {objectFormState.loading ? (
                      <InfoCollapsePlaceholder />
                    ) : (
                      <ObjectTable
                        type='invoice'
                        masterFilter={{
                          order:
                            getModelByName('purchaseOrder').prefix +
                            ':' +
                            purchaseOrderId,
                          orderType: 'purchaseOrder'
                        }}
                        visibleColumns={{ order: false }}
                      />
                    )}
                  </InfoCollapse>
                  <InfoCollapse
                    title='Stock Events'
                    icon={<StockEventIcon />}
                    active={collapseState.stockEvents}
                    onToggle={(expanded) =>
                      updateCollapseState('stockEvents', expanded)
                    }
                    collapseKey='stockEvents'
                  >
                    {objectFormState.loading ? (
                      <InfoCollapsePlaceholder />
                    ) : (
                      <ObjectTable
                        type='stockEvent'
                        masterFilter={{
                          owner:
                            getModelByName('purchaseOrder').prefix +
                            ':' +
                            purchaseOrderId
                        }}
                      />
                    )}
                  </InfoCollapse>
                </Flex>
              )}
            </ObjectForm>
          </ActionHandler>
          <InfoCollapse
            title='Notes'
            icon={<NoteIcon />}
            active={collapseState.notes}
            onToggle={(expanded) => updateCollapseState('notes', expanded)}
            collapseKey='notes'
          >
            <Spin
              spinning={objectFormState.loading}
              indicator={<LoadingOutlined />}
            >
              <Card>
                <NotesPanel _id={purchaseOrderId} type='purchaseOrder' />
              </Card>
            </Spin>
          </InfoCollapse>
          <InfoCollapse
            title='Audit Logs'
            icon={<AuditLogIcon />}
            active={collapseState.auditLogs}
            onToggle={(expanded) => updateCollapseState('auditLogs', expanded)}
            collapseKey='auditLogs'
          >
            {objectFormState.loading ? (
              <InfoCollapsePlaceholder />
            ) : (
              <ObjectTable
                type='auditLog'
                masterFilter={{
                  parent:
                    getModelByName('purchaseOrder').prefix +
                    ':' +
                    purchaseOrderId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
            )}
          </InfoCollapse>
        </Flex>
      </ScrollBox>
    </Flex>
  )
}

export default PurchaseOrderInfo