import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { Link, useParams } from "react-router-dom";
import { actionFullMsgsByChat } from "../actions";
import { store } from "../reducers";
import Button from "react-bootstrap/esm/Button";
import { backURL } from "../constants";
import { AvatarStubHeader, color } from "../components/AvatarStub";
import { actionSendMsg } from "../actions";
import { useDropzone } from "react-dropzone";

const ChatMsgs = ({
    chatMsgs = [],
    getChat,
    msgsCount = 20,
    sendMsg,
    msg,
    nickOwner,
}) => {
   
    const [files, setFiles] = useState(
        msg?.media.map((mediaFile) => ({
            ...mediaFile,
            url: backURL + mediaFile.url,
        })) || []
    );

    const { getRootProps, getInputProps, isDragActive } = useDropzone({
        accept: "image/*",
        maxFiles: 2,
        onDrop: (acceptedFiles) => {
            setFiles(acceptedFiles[0]);
        },
    });

    const [msgsBlock, setMsgsBlock] = useState(0);

    let { _id } = useParams();

    useEffect(() => {
        chatMsgs(_id, msgsBlock, msgsCount);
    }, [_id]);

    const [text, setText] = useState("");
    const [msgs] = useState(getChat);

    const oneChatMsgs = getChat[_id]?.messages;
    return (
        <>
            <div className="chatBlock">
                <Link to={"/chatediting/" + getChat[_id]?._id}>
                    <div className="displayFixed">
                        {getChat[_id]?.avatar?.url ? (
                            <img
                                className="forChatHeader"
                                src={backURL + getChat[_id]?.avatar?.url}
                            />
                        ) : (
                            <AvatarStubHeader
                                login={
                                    getChat[_id]?.title !== null
                                        ? getChat[_id]?.title
                                        : "chat without title"
                                }
                                color={color()}
                            />
                        )}
                        <h5>{getChat[_id]?.title}</h5>
                        <h6>Members: {getChat[_id]?.members.length}</h6>
                    </div>
                </Link>

                <div className="chatContainer">
                    <ul className="msgsContainer">
                        {oneChatMsgs === undefined ? (
                            <h2 className="noMsg">No messages</h2>
                        ) : (
                            oneChatMsgs.map((msg) => (
                                <div
                                    className={
                                        msg.owner.nick === nickOwner
                                            ? "msgLi"
                                            : "msgOther"
                                    }
                                >
                                    {/* {msg?.media[0]?.url !== undefined ? (
                                            <img
                                                className="msgMedia"
                                                src={
                                                    backURL + msg?.media[0]?.url
                                                }
                                            />
                                        ) : (
                                            ""
                                        )} */}

                                        {console.log(msg?.owner.avatar?.url)}
                                    <div className="msgBlock">
                                        {msg?.owner.avatar?.url === undefined ? 
                                        <div className="avatarStubChat1"></div> :
                                        <img
                                            src={
                                                backURL + msg?.owner.avatar?.url
                                            }
                                            className="smallForChat1"
                                        /> }
                                        <h5 style={{ paddingTop: "5px" }}>
                                            {msg?.owner.nick}
                                        </h5>
                                    </div>
                                    <li key={Math.random}>{msg?.text}</li>
                                </div>
                            ))
                        )}
                    </ul>
                </div>

                <div>
                    {oneChatMsgs === getChat[_id] ? (
                        <></>
                    ) : (
                        <div className="sendMsgBlock">
                            <div className="sendBlock">
                                <div
                                    {...getRootProps({
                                        className: "dropZoneStyle2",
                                    })}
                                >
                                    <input {...getInputProps()} />
                                    {isDragActive ? (
                                        <p className="dropZoneStyleBr">
                                            Drop the files here ...
                                        </p>
                                    ) : (
                                        <img
                                            src="https://img.icons8.com/ios-filled/344/folder-invoices--v2.png"
                                            className="sandFile"
                                        />
                                    )}
                                </div>
                                {/* <img
                                    src="https://img.icons8.com/ios-filled/344/folder-invoices--v2.png"
                                    className="sandFile"
                                    value={text}
                            onChange={(e) => {
                                setText(e.target.value);
                            }}
                                /> */}
                                <textarea
                                    placeholder="Write a message..."
                                    rows="2"
                                    value={text}
                                    onChange={(e) => {
                                        setText(e.target.value);
                                    }}
                                />
                            </div>

                            <Button
                                onClick={() =>
                                    sendMsg(
                                        getChat[_id]?._id,
                                        text,
                                        "media",
                                        files
                                    )
                                }
                            >
                                Send a message
                            </Button>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
};

export const CChatMsgs = connect(
    (state) => ({
        getChat: state.chats,
        nickOwner: store.getState().promise.myProfile.payload.nick,
    }),
    {
        chatMsgs: actionFullMsgsByChat,
        sendMsg: actionSendMsg,
    }
)(ChatMsgs);