import type { DeliveryMethod } from '@/app/components/workflow/nodes/human-input/types'
import type { HumanInputFormData } from '@/types/workflow'
import { useCallback, useMemo } from 'react'
import { useStoreApi } from 'reactflow'
import ContentWrapper from '@/app/components/base/chat/chat/answer/human-input-content/content-wrapper'
import { UnsubmittedHumanInputContent } from '@/app/components/base/chat/chat/answer/human-input-content/unsubmitted'
import { CUSTOM_NODE } from '@/app/components/workflow/constants'
import { DeliveryMethodType } from '@/app/components/workflow/nodes/human-input/types'

type HumanInputFormListProps = {
  humanInputFormDataList: HumanInputFormData[]
  onHumanInputFormSubmit?: (formToken: string, formData: any) => Promise<void>
}

const HumanInputFormList = ({
  humanInputFormDataList,
  onHumanInputFormSubmit,
}: HumanInputFormListProps) => {
  const store = useStoreApi()

  const getHumanInputNodeData = useCallback(
    (nodeID: string) => {
      const { getNodes } = store.getState()
      const nodes = getNodes().filter((node) => node.type === CUSTOM_NODE)
      const node = nodes.find((n) => n.id === nodeID)
      return node
    },
    [store],
  )

  const deliveryMethodsConfig = useMemo((): Record<
    string,
    { showEmailTip: boolean; isEmailDebugMode: boolean; showDebugModeTip: boolean }
  > => {
    if (!humanInputFormDataList.length) return {}
    return humanInputFormDataList.reduce(
      (acc, formData) => {
        const deliveryMethodsConfig =
          getHumanInputNodeData(formData.node_id)?.data.delivery_methods || []
        if (!deliveryMethodsConfig.length) {
          acc[formData.node_id] = {
            showEmailTip: false,
            isEmailDebugMode: false,
            showDebugModeTip: false,
          }
          return acc
        }
        const isWebappEnabled = deliveryMethodsConfig.some(
          (method: DeliveryMethod) => method.type === DeliveryMethodType.WebApp && method.enabled,
        )
        const isEmailEnabled = deliveryMethodsConfig.some(
          (method: DeliveryMethod) => method.type === DeliveryMethodType.Email && method.enabled,
        )
        const isEmailDebugMode = deliveryMethodsConfig.some(
          (method: DeliveryMethod) =>
            method.type === DeliveryMethodType.Email && method.config?.debug_mode,
        )
        acc[formData.node_id] = {
          showEmailTip: isEmailEnabled,
          isEmailDebugMode,
          showDebugModeTip: !isWebappEnabled,
        }
        return acc
      },
      {} as Record<
        string,
        { showEmailTip: boolean; isEmailDebugMode: boolean; showDebugModeTip: boolean }
      >,
    )
  }, [getHumanInputNodeData, humanInputFormDataList])

  const filteredHumanInputFormDataList = useMemo(() => {
    return humanInputFormDataList.filter((formData) => formData.display_in_ui)
  }, [humanInputFormDataList])

  return (
    <div className="flex flex-col gap-y-3">
      {filteredHumanInputFormDataList.map((formData) => (
        <ContentWrapper
          key={formData.node_id}
          nodeTitle={formData.node_title}
          className="bg-components-panel-bg"
        >
          <UnsubmittedHumanInputContent
            key={formData.node_id}
            formData={formData}
            showEmailTip={!!deliveryMethodsConfig[formData.node_id]?.showEmailTip}
            isEmailDebugMode={!!deliveryMethodsConfig[formData.node_id]?.isEmailDebugMode}
            showDebugModeTip={!!deliveryMethodsConfig[formData.node_id]?.showDebugModeTip}
            onSubmit={onHumanInputFormSubmit}
          />
        </ContentWrapper>
      ))}
    </div>
  )
}

export default HumanInputFormList
