import { useState } from 'react';
import {  Link } from 'react-router-dom';
import store from '../store';
import { history } from '../App';
import '../App.css';
import { actionSearchUser } from '../store/actions/action-search-user';


export const CreateChatPage = ({ onCreate, us, onSearchUser }) => {
    const [titleAdd, setTitleAdd] = useState("")
    const [membersAdd, setMembersAdd] = useState("")
    const [searchUser, setSearchUser] = useState("")

    const SearchUs = ( _id) => {
        
        onSearchUser(membersAdd)
        
        const stD = store.dispatch(actionSearchUser())
        const userId = us
        console.log('1', stD)
        console.log('2', userId)
    }

    const Creation = () => {
        SearchUs()
        onCreate(titleAdd, membersAdd)
        setTitleAdd('')
        setMembersAdd('')
        
    }

    

    return (
        <div className="formBlock">

        <h1>Создать чат</h1>
        <div className="mb-3">
            <label htmlFor="exampleInputEmail1" className="form-label">Enter Title</label>
            <input
                type="text"
                value={titleAdd}
                onChange={(e) => setTitleAdd(e.target.value)}
                className="form-control"
                id="exampleInputEmail1"
                aria-describedby="emailHelp" />
        </div>
        <div className="mb-3">
            <label htmlFor="exampleInputEmail1" className="form-label">Enter UserName</label>
            <input
                type="text"
                value={membersAdd}
                onChange={(e) => setMembersAdd(e.target.value)}
                className="form-control"
                id="exampleInputEmail1"
                aria-describedby="emailHelp" />
        </div>

        <div className="mb-3">
            <button type="submit" className="btn btn-primary" onClick={Creation}>Создать</button>
        </div>

        <Link to="/chat">Вернуться к чатам</Link>
    </div>
    )
}