import { useRef, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Space, Flex, Card, Modal } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
import useCollapseState from '../../hooks/useCollapseState.js'
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 LockIndicator from '../../common/LockIndicator.jsx'
import ActionHandler from '../../common/ActionHandler.jsx'
import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
import OrderItemsIcon from '../../../Icons/OrderItemIcon.jsx'
import NewOrderItem from '../../Inventory/OrderItems/NewOrderItem.jsx'
import NewShipment from '../../Inventory/Shipments/NewShipment.jsx'
import PostSalesOrder from './PostSalesOrder.jsx'
import ConfirmSalesOrder from './ConfirmSalesOrder.jsx'
import CancelSalesOrder from './CancelSalesOrder.jsx'
import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
import InvoiceIcon from '../../../Icons/InvoiceIcon.jsx'
import StockEventIcon from '../../../Icons/StockEventIcon.jsx'
import { getModelByName } from '../../../../database/ObjectModels.js'

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

const SalesOrderInfo = () => {
  const location = useLocation()
  const objectFormRef = useRef(null)
  const orderItemsTableRef = useRef(null)
  const shipmentsTableRef = useRef(null)
  const actionHandlerRef = useRef(null)
  const [newOrderItemOpen, setNewOrderItemOpen] = useState(false)
  const [newShipmentOpen, setNewShipmentOpen] = useState(false)
  const [postSalesOrderOpen, setPostSalesOrderOpen] = useState(false)
  const [confirmSalesOrderOpen, setConfirmSalesOrderOpen] = useState(false)
  const [cancelSalesOrderOpen, setCancelSalesOrderOpen] = useState(false)
  const salesOrderId = new URLSearchParams(location.search).get('salesOrderId')
  const [collapseState, updateCollapseState] = useCollapseState(
    'SalesOrderInfo',
    {
      info: true,
      notes: true,
      auditLogs: true,
      invoices: true,
      stockEvents: true
    }
  )

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

  const actions = {
    reload: () => {
      objectFormRef?.current?.handleFetchObject?.()
      return true
    },
    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
    },
    delete: () => {
      objectFormRef?.current?.handleDelete?.()
      return true
    },
    newOrderItem: () => {
      setNewOrderItemOpen(true)
      return true
    },
    newShipment: () => {
      setNewShipmentOpen(true)
      return true
    },
    post: () => {
      setPostSalesOrderOpen(true)
      return true
    },
    confirm: () => {
      setConfirmSalesOrderOpen(true)
      return true
    },
    cancel: () => {
      setCancelSalesOrderOpen(true)
      return true
    }
  }

  const editDisabled = getModelByName('salesOrder')
    .actions.find((action) => action.name === 'edit')
    .disabled(objectFormState.objectData)

  return (
    <>
      <Flex
        gap='large'
        vertical='true'
        style={{
          maxHeight: '100%',
          minHeight: 0
        }}
      >
        <Flex justify={'space-between'}>
          <Space size='middle'>
            <Space size='small'>
              <ObjectActions
                type='salesOrder'
                id={salesOrderId}
                disabled={objectFormState.loading}
                objectData={objectFormState.objectData}
              />
              <ViewButton
                disabled={objectFormState.loading}
                items={[
                  { key: 'info', label: 'Sales 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}
              />
              <DocumentPrintButton
                type='salesOrder'
                objectData={objectFormState.objectData}
                disabled={objectFormState.loading}
              />
            </Space>
            <LockIndicator lock={objectFormState.lock} />
          </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.lock?.locked ||
                objectFormState.loading ||
                editDisabled
              }
              loading={objectFormState.editLoading}
            />
          </Space>
        </Flex>

        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
              loading={objectFormState.loading}
              ref={actionHandlerRef}
            >
              <ObjectForm
                id={salesOrderId}
                type='salesOrder'
                style={{ height: '100%' }}
                ref={objectFormRef}
                onStateChange={(state) => {
                  setEditFormState((prev) => ({ ...prev, ...state }))
                }}
              >
                {({ loading, isEditing, objectData }) => (
                  <Flex vertical gap={'large'}>
                    <InfoCollapse
                      title='Sales Order Information'
                      icon={<InfoCircleIcon />}
                      active={collapseState.info}
                      onToggle={(expanded) =>
                        updateCollapseState('info', expanded)
                      }
                      collapseKey='info'
                    >
                      <ObjectInfo
                        loading={loading}
                        indicator={<LoadingOutlined />}
                        isEditing={isEditing}
                        type='salesOrder'
                        labelWidth='225px'
                        objectData={objectData}
                        visibleProperties={{
                          items: false
                        }}
                      />
                    </InfoCollapse>
                    <InfoCollapse
                      title='Sales Order Items'
                      icon={<OrderItemsIcon />}
                      active={collapseState.orderItems}
                      onToggle={(expanded) =>
                        updateCollapseState('orderItems', expanded)
                      }
                      collapseKey='orderItems'
                    >
                      <ObjectTable
                        type='orderItem'
                        masterFilter={{
                          'order._id': salesOrderId,
                          orderType: 'salesOrder'
                        }}
                        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._id': salesOrderId,
                          orderType: 'salesOrder'
                        }}
                        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._id': salesOrderId,
                            orderType: 'salesOrder'
                          }}
                          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._id': salesOrderId
                          }}
                        />
                      )}
                    </InfoCollapse>
                  </Flex>
                )}
              </ObjectForm>
            </ActionHandler>
            <InfoCollapse
              title='Notes'
              icon={<NoteIcon />}
              active={collapseState.notes}
              onToggle={(expanded) => updateCollapseState('notes', expanded)}
              collapseKey='notes'
            >
              <Card>
                <NotesPanel _id={salesOrderId} type='salesOrder' />
              </Card>
            </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._id': salesOrderId }}
                  visibleColumns={{ _id: false, 'parent._id': false }}
                />
              )}
            </InfoCollapse>
          </Flex>
        </ScrollBox>
      </Flex>
      <Modal
        open={newOrderItemOpen}
        onCancel={() => {
          setNewOrderItemOpen(false)
        }}
        width={800}
        footer={null}
        destroyOnHidden={true}
      >
        <NewOrderItem
          onOk={() => {
            setNewOrderItemOpen(false)
          }}
          reset={newOrderItemOpen}
          defaultValues={{
            order: { _id: salesOrderId },
            orderType: 'salesOrder',
            syncAmount: 'itemCost'
          }}
        />
      </Modal>
      <Modal
        open={newShipmentOpen}
        onCancel={() => {
          setNewShipmentOpen(false)
        }}
        width={800}
        footer={null}
        destroyOnHidden={true}
      >
        <NewShipment
          onOk={() => {
            setNewShipmentOpen(false)
          }}
          reset={newShipmentOpen}
          defaultValues={{
            orderType: 'salesOrder',
            order: { _id: salesOrderId }
          }}
        />
      </Modal>
      <Modal
        open={postSalesOrderOpen}
        onCancel={() => {
          setPostSalesOrderOpen(false)
        }}
        width={500}
        footer={null}
        destroyOnHidden={true}
        centered={true}
      >
        <PostSalesOrder
          onOk={() => {
            setPostSalesOrderOpen(false)
            actions.reload()
          }}
          objectData={objectFormState.objectData}
        />
      </Modal>
      <Modal
        open={confirmSalesOrderOpen}
        onCancel={() => {
          setConfirmSalesOrderOpen(false)
        }}
        width={515}
        footer={null}
        destroyOnHidden={true}
        centered={true}
      >
        <ConfirmSalesOrder
          onOk={() => {
            setConfirmSalesOrderOpen(false)
            actions.reload()
          }}
          objectData={objectFormState.objectData}
        />
      </Modal>
      <Modal
        open={cancelSalesOrderOpen}
        onCancel={() => {
          setCancelSalesOrderOpen(false)
        }}
        width={515}
        footer={null}
        destroyOnHidden={true}
        centered={true}
      >
        <CancelSalesOrder
          onOk={() => {
            setCancelSalesOrderOpen(false)
            actions.reload()
          }}
          objectData={objectFormState.objectData}
        />
      </Modal>
    </>
  )
}

export default SalesOrderInfo