import { Button, Flex, Modal, Spin } from 'antd'
import { useEffect, useState } from 'react'
import { useAI } from '@/ai/useAI'
import MarkdownRender from '@/components/MarkdownRender'

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>
        <MarkdownRender>{message?.content}</MarkdownRender>
        <Flex justify="center">
          <Spin size="large" spinning={isLoading}></Spin>
        </Flex>
      </Modal>
    </>
  )
}
