import React from "react";
import { color } from "../../style/varibles";
import { ModalOverlayStyled, UserModalStyled, UserBtns } from "./UserModal.style";

import api from "../../services/api";
import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../Can";

import BtnComponent from "../Base/Btn/Btn";
import FormComponent from "../Base/Form/FormComponent";
import InputComponent from "../Base/Form/Input/InputComponent";
import UserModalComponent from "./UserModalImg/UserModalComponent";

import UserImg from "../../assets/images/User/user.jpg";

const UserModal = ({ modal, click, userId }) => {
  const { user } = React.useContext(AuthContext);

  const InitalState = {
    name: "",
    email: "",
    password: "",
    profile: "",
  };
  const [userData, setUserData] = React.useState(InitalState);
  const [selectedQueueIds, setSelectedQueueIds] = React.useState([]);

  React.useEffect(() => {
    // const fetchUser = async () => {
    //   if (!userId) return;
    //   try {
    //     const { data } = await api.get(`/users/${userId}`);
    //     setUserData((prevState) => {
    //       return console.log({ ...prevState, ...data });
    //     });
    //     const userQueueIds = data.queues?.map((queue) => queue.id);
    //     setSelectedQueueIds(userQueueIds);
    //   } catch (err) {
    //     alert(err);
    //   }
    // };

    // fetchUser();
  }, [userId]);

  return (
    <ModalOverlayStyled modal={modal}>
      <UserModalStyled>
        <UserModalComponent img={UserImg} desc="Clique na imagem para alterar" />
        <FormComponent method="get">
          <InputComponent
            id="nome"
            label="Nome"
            type="text"
            value={userData.name}
            onChange={(event) => setUserData({ name: event.target.data })}
          />
          <InputComponent
            id="email"
            label="E-mail"
            type="email"
            value={userData.email}
            onChange={(event) => setUserData({ email: event.target.data })}
          />
          <InputComponent id="password" label="Senha" type="password" />
          <UserBtns>
            <BtnComponent text="Cancelar" onClick={click} />
            <BtnComponent
              text="Salvar"
              bgcolor={color.status.yes}
              fontcolor={color.pricinpal.blanco}
            />
          </UserBtns>
        </FormComponent>
      </UserModalStyled>
    </ModalOverlayStyled>
  );
};

export default UserModal;

/*{name: 'teste', id: 2, email: 'teste@teste.com', profile: 'master', tokenVersion: 0, …}
email: "teste@teste.com"
id: 2
name: "teste"
profile: "master"
queues: []
tokenVersion: 0 */