import { useEffect, useState } from "react"
import { connect } from "react-redux"
import { actionEditChat, actionFullEditChat, actionUploadFile, actionUserSearch } from "../actions"
import { MemberList, UserSearch } from "./chatForm"
import { MyDropzone } from "./dropzone"

export const ChatEditForm = ({ chat_id, chat, searchState, onUpload, onUserSearch, onChangeChat }) => {
    let [edit, setEdit] = useState(false)
    let [newTitle, setNewTitle] = useState(chat.title || "")
    let [newAvatar, setNewAvatar] = useState(chat.avatar)
    let [newMembers, setNewMembers] = useState(chat.members)

    useEffect(() => {
        setEdit(false)
        setNewTitle(chat.title)
        setNewAvatar(chat.avatar)
        setNewMembers(chat.members)
    }, [chat])

    console.log(chat_id)

    let editChatHandler = () => {
        setEdit(!edit)
        setNewMembers(chat.members)
    }

    let userAddHandler = (user) => {
        setNewMembers([...newMembers, user])
    }

    let memberDeleteHandler = (user) => {
        setNewMembers(newMembers.filter(member => member._id !== user._id))
    }

    return (
        <div className="chat-edit-form">
            {edit ? <input onChange={(e) => setNewTitle(e.target.value)} value={newTitle} /> : <span>Название чата: {chat.title}</span>}
            {edit ? <div>
                <span>Загрузите новый аватар</span>
                <MyDropzone maxFiles={1} onUpload={onUpload} onSet={setNewAvatar} />
            </div> :
                chat.avatar && <img src={"/" + chat.avatar.url} />}

            {<MemberList members={newMembers} onDeleteMember={edit && memberDeleteHandler} />}
            {edit && <UserSearch searchState={searchState} onUserSearch={onUserSearch} onAddMember={userAddHandler} />}
            <div className="edit-btn-container">
                <button onClick={() => editChatHandler()} >{edit ? "Отменить редактирование" : "Редактировать чат"}</button>
                {edit && <button onClick={() => onChangeChat(chat_id, newTitle, newAvatar._id, newMembers)}>Применить изменения</button>}
            </div>
        </div>
    )
}

export const ConnectChatEditForm = connect(state => ({ searchState: state.promise?.userSearch?.payload?.data?.UserFind }),
    {
        onUpload: actionUploadFile,
        onUserSearch: actionUserSearch,
        onChangeChat: actionFullEditChat
    })(ChatEditForm)