import { Button, Modal } from 'antd'
import { useEffect, useState } from 'react'
import { useAI } from '@/ai/useAI'
import AIBubble from '@/ai/AIBubble'

export default function AIModal({ prompt }: { prompt: string }) {
  const [open, setOpen] = useState(false)
  const { post, isLoading, message } = useAI()

  useEffect(() => {
    if (open) {
      post({ messages: [{ role: 'user', content: prompt }] })
    }
  }, [open, prompt])
  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        AI建议
      </Button>
      <Modal title="AI建议" open={open} footer={null} width={1000} onCancel={() => setOpen(false)} destroyOnClose>
        <AIBubble loading={!message?.content} typing={isLoading} content={message?.content}></AIBubble>
      </Modal>
    </>
  )
}
