NapCatQQ/napcat.webui/src/components/network_edit/modal.tsx

import { Modal, ModalContent, ModalHeader } from '@heroui/modal'
import toast from 'react-hot-toast'

import useConfig from '@/hooks/use-config'

import HTTPClientForm from './http_client'
import HTTPServerForm from './http_server'
import HTTPServerSSEForm from './http_sse'
import WebsocketClientForm from './ws_client'
import WebsocketServerForm from './ws_server'

const modalTitle = {
  httpServers: 'HTTP Server',
  httpClients: 'HTTP Client',
  httpSseServers: 'HTTP SSE Server',
  websocketServers: 'Websocket Server',
  websocketClients: 'Websocket Client'
}

export interface NetworkFormModalProps<
  T extends keyof OneBotConfig['network']
> {
  isOpen: boolean
  field: T
  data?: OneBotConfig['network'][T][0]
  onOpenChange: (isOpen: boolean) => void
}

const NetworkFormModal = <T extends keyof OneBotConfig['network']>(
  props: NetworkFormModalProps<T>
) => {
  const { isOpen, onOpenChange, field, data } = props
  const { createNetworkConfig, updateNetworkConfig } = useConfig()
  const isCreate = !data

  const onSubmit = async (data: OneBotConfig['network'][typeof field][0]) => {
    try {
      if (isCreate) {
        await createNetworkConfig(field, data)
      } else {
        await updateNetworkConfig(field, data)
      }
      toast.success('保存配置成功')
    } catch (error) {
      const msg = (error as Error).message

      toast.error(`保存配置失败: ${msg}`)

      throw error
    }
  }

  const renderFormComponent = (onClose: () => void) => {
    switch (field) {
      case 'httpServers':
        return (
          <HTTPServerForm
            data={data as OneBotConfig['network']['httpServers'][0]}
            onClose={onClose}
            onSubmit={onSubmit}
          />
        )
      case 'httpClients':
        return (
          <HTTPClientForm
            data={data as OneBotConfig['network']['httpClients'][0]}
            onClose={onClose}
            onSubmit={onSubmit}
          />
        )
      case 'websocketServers':
        return (
          <WebsocketServerForm
            data={data as OneBotConfig['network']['websocketServers'][0]}
            onClose={onClose}
            onSubmit={onSubmit}
          />
        )
      case 'websocketClients':
        return (
          <WebsocketClientForm
            data={data as OneBotConfig['network']['websocketClients'][0]}
            onClose={onClose}
            onSubmit={onSubmit}
          />
        )
      case 'httpSseServers':
        return (
          <HTTPServerSSEForm
            data={data as OneBotConfig['network']['httpSseServers'][0]}
            onClose={onClose}
            onSubmit={onSubmit}
          />
        )
      default:
        return null
    }
  }

  return (
    <Modal
      backdrop="blur"
      isDismissable={false}
      isOpen={isOpen}
      size="lg"
      scrollBehavior="outside"
      onOpenChange={onOpenChange}
    >
      <ModalContent>
        {(onClose) => (
          <>
            <ModalHeader className="flex flex-col gap-1">
              {modalTitle[field]}
            </ModalHeader>
            {renderFormComponent(onClose)}
          </>
        )}
      </ModalContent>
    </Modal>
  )
}

export default NetworkFormModal