import { useState } from "react"
import { connect } from "react-redux"
import { actionFullChangeUserAvatar, actionFullChangeUserNick, actionFullChangeUserPassword } from "../actions"
import { ConnectDropzone } from "./dropzone"

const ProfileEdit = ({ userID, onChangeAvatar, onChangeNick, onChangePassword }) => {
    let [avatar, setAvatar] = useState(false)
    let [avatarData, setAvatarData] = useState([])
    let [nick, setNick] = useState(false)
    let [nickData, setNickData] = useState("")
    let [password, setPassword] = useState(false)
    let [passwordData, setPasswordData] = useState("")
    let [passwordValidation, setPasswordValidation] = useState("")
    const validation = new RegExp(`^(?=.*[0-9]).{${4},}$`)

    let applyHandler = (type) => {
        if (type === "avatar") {
            onChangeAvatar(userID, avatarData[0]._id)
            setAvatar(!avatar)
            setAvatarData([])
        }

        if (type === "nick") {
            onChangeNick(userID, nickData)
            setNick(!nick)
        }

        if (type === "password") {
            onChangePassword(userID, passwordData)
            setPassword(!password)
            setPasswordData("")
        }
    }

    return (
        <div>
            <div>
                <button onClick={() => setAvatar(!avatar)}>Аватар</button>
                {avatar &&
                    <>
                        <ConnectDropzone maxFiles={1} onSet={setAvatarData} />
                        <button onClick={() => applyHandler("avatar")}>Установить</button>
                    </>}
            </div>
            <div>
                <button onClick={() => setNick(!nick)}>Ник</button>
                {nick &&
                    <>
                        <input onChange={(e) => setNickData(e.target.value)} value={nickData} placeholder="введите новый ник" />
                        <button onClick={() => applyHandler("nick")}>Установить</button>
                    </>}
            </div>
            <div>
                <button onClick={() => setPassword(!password)}>Пароль</button>
                {password &&
                    <>

                        <input type='password' value={passwordData}
                            onChange={(e) => setPasswordData(e.target.value)} placeholder="введите новый пароль" />
                        <input type='password' value={passwordValidation}
                            onChange={e => setPasswordValidation(e.target.value)} placeholder="повторите новый пароль" />
                        <button disabled={!(passwordData === passwordValidation && validation.test(passwordData))}
                            onClick={() => applyHandler("password")}>Установить</button>
                    </>}
            </div>
            <a href="/chat">Вернуться на главную</a>
        </div>
    )
}

export const ConnectProfileEdit = connect(state => ({ userID: state.auth.payload.sub.id }),
    {
        onChangeAvatar: actionFullChangeUserAvatar,
        onChangeNick: actionFullChangeUserNick,
        onChangePassword: actionFullChangeUserPassword
    })(ProfileEdit)