import React from 'react';
import { FloatButton } from 'antd';
import { CommentOutlined } from '@ant-design/icons';
import { DeepChat } from 'deep-chat-react';

function AiChat() {
    const [visible, setVisible] = React.useState(false);

    return (
        <>
            {visible ? (
                <div style={{ position: 'fixed', bottom: 100, right: 10, zIndex: 10000, maxWidth: '95vw', width: 500, height: 1000, maxHeight: 'calc(100vh - 165px)' }}>
                    <DeepChat
                        style={{ width: '100%', height: '100%', borderRadius: 10, boxShadow: '0 0 10px rgba(0,0,0,0.1)', bottom: 0, position: 'absolute' }}
                        history={[
                            { text: 'Show me a modern city', role: 'user' },
                            { files: [{ src: 'https://test.ex.umbach.dev/api/statico/809fe37e-8c41-4a44-98d1-d9247affd531/67c763b6-ea67-4b49-9621-2f78b85eb180.png', type: 'image' }], role: 'ai' },
                            { text: 'Whats on your mind?', role: 'user' },
                            { text: 'Peace and tranquility', role: 'ai' },
                        ]}
                    ></DeepChat>
                </div>
            ) : null}

            <FloatButton
                icon={<CommentOutlined />}
                type="primary"
                onClick={() => console.log('onClick')}
                style={{ zIndex: 10000 }}
                onClickCapture={() => {
                    setVisible(!visible);
                }}
            />
        </>
    );
}

export default AiChat;