import {ClearOutlined, UserOutlined} from '@ant-design/icons'
import {Bubble, Sender, useXAgent, useXChat, Welcome} from '@ant-design/x'
import {fetchEventSource} from '@echofly/fetch-event-source'
import {Button, Divider, Flex, Switch, Tooltip, Typography} from 'antd'
import markdownIt from 'markdown-it'
import {useRef, useState} from 'react'
import styled from 'styled-components'

const md = markdownIt({html: true, breaks: true})
const ConversationDiv = styled.div`
    height: calc(100vh - 76px);
    display: flex;
    flex-direction: column;
    padding: 10px;

    .conversation-welcome {
        flex: 1;
        width: 70%;
        margin: 30px auto 30px;
    }

    .conversation-list {
        flex: 1;
        margin-bottom: 30px;
        padding-left: 30px;
        padding-right: 30px;

        think {
            color: gray;
            display: block;
            border-left: 3px solid;
            padding-left: 5px;
            margin-bottom: 10px;
            white-space: pre-line;
        }
    }

    .conversation-sender {
        height: 100px;
        padding-left: 30px;
        padding-right: 30px;
    }
`

function Conversation() {
  const abortController = useRef<AbortController | null>(null)
  const [input, setInput] = useState<string>('')
  const [think, setThink] = useState<boolean>(true)

  const [agent] = useXAgent<{ role: string, content: string }>({
    request: async (info, callbacks) => {
      await fetchEventSource('http://127.0.0.1:8080/chat/async', {
        method: 'POST',
        headers: {
          'Authorization': 'Basic QXhoRWJzY3dzSkRiWU1IMjpjWXhnM2I0UHRXb1ZENVNqRmF5V3h0blNWc2p6UnNnNA==',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(info.messages),
        signal: abortController.current?.signal,
        onmessage: ev => {
          console.log(ev)
          callbacks.onUpdate({
            id: ev.id,
            event: 'delta',
            data: ev.data,
          })
        },
        onclose: () => callbacks.onSuccess([]),
      })
    },
  })
  const {onRequest, messages, setMessages} = useXChat({
    agent,
    transformMessage: ({originMessage, chunk}) => {
      let text = ''
      try {
        if (chunk?.data) {
          text = chunk.data
        }
      } catch (error) {
        console.error(error)
      }
      return {
        content: (originMessage?.content || '') + text,
        role: 'assistant',
      }
    },
    resolveAbortController: controller => {
      abortController.current = controller
    },
  })

  return (
    <ConversationDiv>
      {messages.length > 0
        ? (<Bubble.List
          className="conversation-list"
          roles={{
            assistant: {
              placement: 'start',
              avatar: {
                icon: <img src="icon.png" alt=""/>,
                style: {
                  background: 'transparent',
                },
              },
              messageRender: content => {
                let split = content.split('</think>')
                if (split.length > 1) {
                  content = `${split[0]}</think>${md.render(split[1])}`
                }
                return (
                  <Typography>
                    <div dangerouslySetInnerHTML={{__html: content}}/>
                  </Typography>
                )
              },
            },
            user: {
              placement: 'end',
              avatar: {
                icon: <UserOutlined/>,
              },
            },
          }}
          items={messages.map(({id, message}) => ({
            key: id,
            ...message,
          }))}
        />)
        : (<div className="conversation-welcome">
          <Welcome
            variant="borderless"
            icon={<img src="icon.png" alt="icon"/>}
            title="你好，我是基于大模型深度思考技术构建的 AI 运营助手"
            description="我可以帮你查询、检索Hudi 服务的运行情况，分析、处理 Hudi 服务的运营故障，输出、解读 Hudi 系统整体运营报告"
          />
        </div>)}
      <div className="conversation-sender">
        <Sender
          value={input}
          onChange={setInput}
          onSubmit={message => {
            onRequest({
              message: {
                role: 'user',
                content: (!think && messages.length === 0) ? `/no_think ${message}` : message,
              },
              stream: true,
            })
            setInput('')
          }}
          onCancel={() => abortController.current?.abort()}
          footer={({components}) => {
            const {SendButton, LoadingButton} = components
            return (
              <Flex justify="space-between" align="center">
                <Flex gap="small" align="center">
                  深度思考
                  <Switch
                    size="small"
                    value={think}
                    onChange={setThink}
                    disabled={messages.length > 0}
                  />
                  <Divider type="vertical"/>
                  <Tooltip title="清空对话">
                    <Button
                      icon={<ClearOutlined/>}
                      type="text"
                      size="small"
                      onClick={() => setMessages([])}
                    />
                  </Tooltip>
                </Flex>
                <Flex align="center">
                  {agent.isRequesting() ? (
                    <LoadingButton type="default"/>
                  ) : (
                    <SendButton type="primary" disabled={false}/>
                  )}
                </Flex>
              </Flex>
            )
          }}
          actions={false}
        />
      </div>
    </ConversationDiv>
  )
}

export default Conversation