import React, {useEffect, useState} from 'react'
import { withRouter } from 'react-router-dom'
import { Tabs, Space, Input, Button } from 'antd-mobile'
import { ArrowsAltOutline, UpCircleOutline, AudioOutline } from 'antd-mobile-icons';
import ChatCom from './components/ChatCom';
import SearchCom from './components/SearchCom'
import { getTxt2Img, getChatData } from './components/ChatCom/service';
import defaultDemo from './images/defaultImage.png';
import type { MessageType } from './components/ChatCom';
import "./style.less"

function Home(props: any) {
  const [bgImage, setBgImage] = useState(defaultDemo);
  const [isShowBig, setShowBig] = useState(false);
  const [value, setValue] = useState('');
  const [messages, setMessages] = useState<MessageType[]>([]);
  const [isShowInput, setIsShowInput] = useState(true);

  const handleEnterPress = () => {
    if (value === '') {
        return;
    }

    setMessages((messages) => [...messages, {
      type: '0',
      value,
    }]);

    setValue('');

    getChatData(value).then((res: any) => {
      setTimeout(() => {
        setMessages((messages) => [...messages, {
          type: '1',
          value: res.data?.response || '',
        }]);
      }, 30);
    })
  }

  useEffect(() => {
    getTxt2Img('A young lady is wearing a white button-down shirt, a black midi skirt, light brown pumps, and a beige trench coat for a professional and elegant look.').then((res: any) => {
        if (res) {
          setBgImage('data:image/png;base64,' + res.data.images[0]);
        }
    })
}, []);

  return (
    <div className="home" style={{backgroundImage: `url(${bgImage})`}}>
        <ArrowsAltOutline fontSize={32} onClick={() => setShowBig(!isShowBig)}></ArrowsAltOutline>
        {
          !isShowBig && <Tabs onChange={(key) => { setIsShowInput(key === 'chat')}}>
            <Tabs.Tab title='穿搭' key='chat'>
              <ChatCom messages={messages}></ChatCom>
            </Tabs.Tab>
            <Tabs.Tab title='单品' key='recommend'>
              <SearchCom></SearchCom>
            </Tabs.Tab>
          </Tabs>
        }
        {isShowBig && isShowInput && <ChatCom messages={messages}></ChatCom>}
        {isShowInput && <div className="chat-container-input">
            <Space>
                <AudioOutline fontSize={24} />
                <Input
                    placeholder='输入文字'
                    value={value}
                    onChange={val => {
                        setValue(val)
                    }}
                    onEnterPress={handleEnterPress}
                />
                <Button onClick={handleEnterPress}>
                   <UpCircleOutline fontSize={24}></UpCircleOutline>
                </Button>
            </Space>
        </div>
      }
    </div>
  )
}

export default withRouter(Home)