import { connect } from "react-redux";
import { actionSearchUser, urlUpload } from "../reducers";
import { useEffect, useState, useRef } from "react";
import {SearchUserInput} from "./index";
import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';


const OneUserIcon = ({nick, img, login, id, isUserAdm}) => {

    return(
        
            <div className = "oneUser" key = {`${id}`}>
                <Link to = {"/user/" + id }>
                    <div>
                    <img src={img ? img : 'https://pngicon.ru/file/uploads/picca-1.png'} />
                    </div>
                    <div>
                    <span>{nick || login}</span>
                    {isUserAdm && 
                    <span className = "adminSmile">
                    <svg  xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" className="bi bi-emoji-sunglasses-fill" viewBox="0 0 16 16">
                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM2.31 5.243A1 1 0 0 1 3.28 4H6a1 1 0 0 1 1 1v.116A4.22 4.22 0 0 1 8 5c.35 0 .69.04 1 .116V5a1 1 0 0 1 1-1h2.72a1 1 0 0 1 .97 1.243l-.311 1.242A2 2 0 0 1 11.439 8H11a2 2 0 0 1-1.994-1.839A2.99 2.99 0 0 0 8 6c-.393 0-.74.064-1.006.161A2 2 0 0 1 5 8h-.438a2 2 0 0 1-1.94-1.515L2.31 5.243zM4.969 9.75A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .866-.5z"/>
                    </svg>
                    {/* <span>admin</span> */}
                    </span>
                    }
                    </div>
                </Link>
            </div>
        
    )
}

const UsersList = ({match:{params:{users}}, state, getData, usersList}) => {
    useEffect(() =>  getData(`${users}`),[users]);
    console.log(state)
    if(usersList) {
    return(
        <>
            <SearchUserInput/>
           

            <div className = "usersList">
                {usersList.map((user) => 
                    
                    <OneUserIcon key = {user._id} isUserAdm = {user.acl.indexOf("admin") > -1} id = {user._id }nick = {user.nick} login = {user.login} img = {user.avatar ? (`${urlUpload}/${user.avatar.url}`) : ('https://pngicon.ru/file/uploads/picca-1.png')}/>
                )}
            </div>
        
        </>
    )} else {
        return  (
        <>
         <SearchUserInput/>
        </>
        )
    }
}

const mapStateToProps = state => ({
    state: state,
    usersList: state.promiseRed && state.promiseRed.FoundUser &&
    state.promiseRed.FoundUser.payload && state.promiseRed.FoundUser.payload.data &&
    state.promiseRed.FoundUser.payload.data.UserFind
 });


 
 const mapDispatchToProps = dispatch => bindActionCreators({
   getData: actionSearchUser,
 }, dispatch);

 const CUsersList = connect(mapStateToProps, mapDispatchToProps)(UsersList);

 export default CUsersList;