import { useRef, useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } 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 ObjectProperty from '../../common/ObjectProperty.jsx'
import ViewButton from '../../common/ViewButton.jsx'
import { getModelProperty } from '../../../../database/ObjectModels.js'
import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
import NoteIcon from '../../../Icons/NoteIcon.jsx'
import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
import PartStockIcon from '../../../Icons/PartStockIcon.jsx'
import ProductStockIcon from '../../../Icons/ProductStockIcon.jsx'
import GraphIcon from '../../../Icons/GraphIcon.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 ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
import HistoryDisplay from '../../common/HistoryDisplay.jsx'

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

const ProductStockInfo = () => {
  const location = useLocation()
  const objectFormRef = useRef(null)
  const actionHandlerRef = useRef(null)


  const { setOnModalOk } = useActions()
  useEffect(() => {
    setOnModalOk(() => () => {
      objectFormRef.current?.handleFetchObject?.()
    })
    return () => setOnModalOk(null)
  }, [setOnModalOk])
  const productStockId = new URLSearchParams(location.search).get(
    'productStockId'
  )
  const [collapseState, updateCollapseState] = useCollapseState(
    'ProductStockInfo',
    {
      info: true,
      partStocks: true,
      events: true,
      history: true,
      notes: true,
      auditLogs: false
    }
  )

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

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

  return (
      <Flex
        gap='large'
        vertical='true'
        style={{
          maxHeight: '100%',
          minHeight: 0
        }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
            <Space size='small'>
              <ObjectActions
                type='productStock'
                id={productStockId}
                disabled={objectFormState.loading}
                objectData={objectFormState.objectData}
              />
              <ViewButton
                disabled={objectFormState.loading}
                items={[
                  { key: 'info', label: 'Product Stock Information' },
                  { key: 'partStocks', label: 'Part Stocks' },
                  { key: 'events', label: 'Product Stock Events' },
                  { key: 'history', label: 'Product Stock History' },
                  { key: 'notes', label: 'Notes' },
                  { key: 'auditLogs', label: 'Audit Logs' }
                ]}
                visibleState={collapseState}
                updateVisibleState={updateCollapseState}
              />
              <UserNotifierToggle
                type='productStock'
                objectData={objectFormState.objectData}
                disabled={objectFormState.loading}
              />
              <DocumentPrintButton
                type='productStock'
                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}
            />
            <ObjectTableNavigationButtons
              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={productStockId}
              objectType='productStock'
              showEndingDivider={true}
            />
          </Space>
        </Flex>

        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
              loading={objectFormState.loading}
              ref={actionHandlerRef}
            >
              <ObjectForm
                id={productStockId}
                type='productStock'
                style={{ height: '100%' }}
                ref={objectFormRef}
                setCurrentObject={true}
                onStateChange={(state) => {
                  setEditFormState((prev) => ({ ...prev, ...state }))
                }}
              >
                {({ loading, isEditing, objectData }) => (
                  <Flex vertical gap={'large'}>
                    <InfoCollapse
                      title='Product Stock Information'
                      icon={<InfoCircleIcon />}
                      active={collapseState.info}
                      onToggle={(expanded) =>
                        updateCollapseState('info', expanded)
                      }
                      collapseKey='info'
                    >
                      <ObjectInfo
                        loading={loading}
                        indicator={<LoadingOutlined />}
                        isEditing={isEditing}
                        type='productStock'
                        objectData={objectData}
                        labelWidth='175px'
                        visibleProperties={{ partStocks: false }}
                      />
                    </InfoCollapse>
                    <InfoCollapse
                      title='Part Stocks'
                      icon={<PartStockIcon />}
                      active={collapseState.partStocks}
                      onToggle={(expanded) =>
                        updateCollapseState('partStocks', expanded)
                      }
                      collapseKey='partStocks'
                    >
                      <ObjectProperty
                        {...getModelProperty('productStock', 'partStocks')}
                        isEditing={isEditing}
                        objectData={objectData}
                        loading={loading}
                        size='medium'
                      />
                    </InfoCollapse>
                  </Flex>
                )}
              </ObjectForm>
            </ActionHandler>

            <InfoCollapse
              title='Product Stock Events'
              icon={<ProductStockIcon />}
              active={collapseState.events}
              onToggle={(expanded) => updateCollapseState('events', expanded)}
              collapseKey='events'
            >
              {objectFormState.loading ? (
                <InfoCollapsePlaceholder />
              ) : (
                <ObjectTable
                  type='stockEvent'
                  masterFilter={{ 'parent._id': productStockId }}
                  visibleColumns={{ parent: false }}
                />
              )}
            </InfoCollapse>

            <InfoCollapse
              title='Product Stock History'
              icon={<GraphIcon />}
              active={collapseState.history}
              onToggle={(expanded) => updateCollapseState('history', expanded)}
              collapseKey='history'
            >
              {objectFormState.loading ? (
                <InfoCollapsePlaceholder />
              ) : (
                <HistoryDisplay
                  history={objectFormState.objectData?.history || []}
                  objectType='productStock'
                  chartType='line'
                  loading={objectFormState.loading}
                />
              )}
            </InfoCollapse>

            <InfoCollapse
              title='Notes'
              icon={<NoteIcon />}
              active={collapseState.notes}
              onToggle={(expanded) => updateCollapseState('notes', expanded)}
              collapseKey='notes'
            >
              <Card>
                <NotesPanel _id={productStockId} type='productStock' />
              </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': productStockId }}
                  visibleColumns={{ _id: false, 'parent._id': false }}
                />
              )}
            </InfoCollapse>
          </Flex>
        </ScrollBox>
      </Flex>
  )
}

export default ProductStockInfo
