'use client'
import { useCallback, useState } from 'react'
import { RiCloseLine } from '@remixicon/react'
import s from './index.module.css'
import cn from '@/utils/classnames'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import { addKnowledge, editKnowledge } from '@/service/common'
import 'react-multi-email/dist/style.css'
import Input from '@/app/components/base/input'
import { SimpleSelect } from '@/app/components/base/select'

const InviteModal = ({
  transfer,
  onCancel,
  onSend,
}: any) => {
  const [type, setType] = useState<any>(transfer.row?.type || '')
  const [name, setName] = useState<string>(transfer.row?.name || '')
  const [url, setUrl] = useState<string>(transfer.row?.url || '')
  const [method, setMethod] = useState<string>(transfer.row?.method || '')
  const options = [
    { name: '智能问答', value: 'QUESTION_ANSWER' },
    { name: '智能搜索', value: 'SEARCH' },
    { name: '智能推荐', value: 'RECOMMEND' },
  ]
  const handleSave = useCallback(async () => {
    try {
      let res: any = () => {}
      if (transfer.mode === 'add') {
        res = await addKnowledge({
          url: '/external_applications',
          body: { type, name, url, method, status: false },
        })
      }
      else {
        res = await editKnowledge({
          url: `/external_applications/${transfer.row.id}`,
          body: { type, name, url, method },
        })
      }
      const { id }: any = res
      if (id) {
        onCancel()
        onSend()
      }
    }
    catch (e) { }
  }, [type, name, url, method, onCancel, onSend, transfer])

  return (
    <div className={cn(s.wrap)}>
      <Modal overflowVisible isShow onClose={() => { }} className={cn(s.modal)}>
        <div className='mb-2 flex justify-between'>
          <div className='text-xl font-semibold text-text-primary'>{transfer.mode === 'add' ? '新增' : '编辑'}类型</div>
          <RiCloseLine className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={onCancel} />
        </div>
        <div>
          <div className={cn('flex flex-wrap items-center justify-between')}>
            <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
              服务类型
            </div>
            <div className='w-full'>
              <SimpleSelect
                defaultValue={type}
                onSelect={(i) => { setType(i.value) }}
                items={options}
                allowSearch={false}
              />
            </div>
          </div>
          <div className={cn('flex flex-wrap items-center justify-between')}>
            <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
              系统名称
            </div>
            <Input
              value={name}
              onChange={e => setName(e.target.value)}
              className='h-9'
              placeholder='请输入系统名称'
            />
          </div>
          <div className={cn('flex flex-wrap items-center justify-between')}>
            <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
              URL
            </div>
            <Input
              value={url}
              onChange={e => setUrl(e.target.value)}
              className='h-9'
              placeholder='请输入URL'
            />
          </div>
          <div className={cn('flex flex-wrap items-center justify-between')}>
            <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
              请求方式
            </div>
            <Input
              value={method}
              onChange={e => setMethod(e.target.value)}
              className='h-9'
              placeholder='请输入请求方式'
            />
          </div>
          <Button
            tabIndex={0}
            className='mt-4 w-full'
            onClick={handleSave}
            disabled={!type.length || !name.length || !url.length || !method.length}
            variant='primary'
          >
            保存
          </Button>
        </div>
      </Modal>
    </div>
  )
}

export default InviteModal