import React, { useContext } from "react";
import styles from "./ProfilePage.module.css";
import { AuthContext } from "../../contexts/auth/AuthContext.js";
import formatDate from "../../utils/date/formatDate.js";
import Task from "../../components/Task/Task";
import Button from "../../components/ui/button/button.jsx";
import { useNavigate } from "react-router";
import ThemeSwitcher from "../../components/ui/themeSwitcher/ThemeSwitcher.jsx";

function ProfilePage() {

    const { user, logout } = useContext(AuthContext);
    const navigate = useNavigate();

    const handleLogout = () => {
        logout();
    }

  return (
    <div className={styles.container}>
      <div className={`${styles.profileboard} glassCard`}>
        <div className={styles.contentWrapper}>
          <div className={styles.profilePictureContainer}>
            <img
              src="/react.svg"
              alt="Photo de profil"
              className={styles.profilePicture}
            />
          </div>
          <div className={styles.description}>
            <div className={styles.headerProfile}>
                <h2> {user.name} {user.lastname} </h2>
                <div className={styles.settingsBtns}>
                    <ThemeSwitcher />
                    <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
                </div>
            </div>
            <div className={styles.topDescription}>
              <div className={styles.infoBlock}>
                <p><strong>Role :</strong> {user.role}</p>
                <p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
              </div>
              <div className={styles.infoBlock}>
                <p><strong>Mail :</strong> {user.email} </p>
                <p><strong>Téléphone :</strong> {user.phone}</p>
              </div>
              <Button variant={"transparent"} onClick={() => navigate("/profile/update")}>
                  <img src={"/icons/pen.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
              </Button>
            </div>

            <h2>Vos Événements :</h2>
              {user.tasks && user.tasks.map((task, index) => (
                  <Task key={index} task={task} />
              ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default ProfilePage;