import React, { useState, useEffect, useRef } from 'react'
import Box from '../Box'
import { Button } from '../Button'
import { P1 } from '../Text'
import Input from '../Forms/FormElements/Input'
import styled from '@emotion/styled'
import Scrollbar from '../Scrollbar/Scrollbar'

const Chat = ({ arr, handleChange }) => {
    const ScrollbarRef = useRef(null)
    useEffect(() => {
        if (!ScrollbarRef) return
        ScrollbarRef.current.scrollToBottom()
    }, [arr])
    useEffect(() => {
        if (!ScrollbarRef) return
        ScrollbarRef.current.scrollToBottom()
    }, [ScrollbarRef])
    return (
        <Box width={380}
            height={630} border='1px solid black;'>
            <Box backgroundColor='green' width={378}
                height={56}
                borderRadius={'12px 12px 0 0'} display='flex' justifyContent='center'
                alignItems='center'>
                <P1>Чат</P1>
            </Box>
            <Scrollbar innerRef={ScrollbarRef} autoHeightMax={518}>
                {arr.messages.map((messages, id) => {
                    return renderMessage(messages)
                })}
            </Scrollbar>
            <Box backgroundColor='blue' display='flex' borderRadius={'0 0 12px 12px'}>
                <Input onChange={handleChange} /><Button onClick={() => { console.log('arr.messages', arr) }} />
            </Box>
        </Box>
    )
}


const renderMessage = (messages) => {
    const Message = MessageType[messages.from.type]

    return <Message {...messages} />
}

const Client = (messages) => <ClientWrapper>{messages.message.text}</ClientWrapper>
const External = (messages) => <ExternalWrapper>
    <Box as='img' src=''></Box>
    {messages.message.text}
</ExternalWrapper>
const Agent = (messages) => <AgentWrapper>{messages.message.text}</AgentWrapper>


const ClientWrapper = styled.div`
margin: 8px;
    margin-left: auto;
    max-width: 265px;
    border-radius: 16px;
    border: 2px solid green;
    padding: 8px;

`
const ExternalWrapper = styled.div`
    max-width: 265px;
    border-radius: 16px;
    border: 2px solid blue;
    padding: 8px;

    margin: 8px;
`
const AgentWrapper = styled.div`
    max-width: 265px;
    border-radius: 16px;
    border: 2px solid pink;
    padding: 8px;
    margin: 8px;
`
const MessageType = {
    Client,
    External,
    Agent
}
const Wrapper = styled.div`
    background-color: pink;
    height: 518px;
    text-align: left;
	padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 20px;
	overflow: auto;
`
export default Chat