import { useContext, useEffect } from "react";
import styles from "./ProfilePage.module.css";

import { AuthContext } from "../../contexts/auth/AuthContext";
import formatDate from "../../utils/date/formatDate";

//import Task from "../../components/Task/Task";
//import SettingsModal from "./components/SettingsModal/SettingsModal";

interface TaskType {
  id: number;
  title?: string;
  completed?: boolean;
  [key: string]: unknown;
}

interface User {
  name: string;
  lastname: string;
  role: string;
  email: string;
  phone: string | null;
  created_at: string;
  tasks: TaskType[];
}

interface AuthContextType {
  user: User | null;
  update: () => void;
}



function ProfilePage(){
  const { user, update } = useContext(AuthContext) as AuthContextType;

  useEffect(() => {
    update();
  }, [update]);

  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>

            <div className={styles.topDescription}>
              <div className={`${styles.infoBlock} glassBorder`}>
                <p>
                  <strong>Role :</strong> {user?.role}
                </p>
                <p>
                  <strong>Membre depuis :</strong>{" "}
                  {user && formatDate(user.created_at)}
                </p>
              </div>

              <div className={`${styles.infoBlock} glassBorder`}>
                <p>
                  <strong>Mail :</strong> {user?.email}
                </p>
                <p>
                  <strong>Téléphone :</strong>{" "}
                  {user?.phone ?? "Pas de numéro enregistré"}
                </p>
              </div>

              <div className={styles.settingImage}>
               {/* <SettingsModal />*/}
              </div>
            </div>

            <h2>Tâches :</h2>

           {/* {user && user.tasks.length > 0 ? (
              user.tasks.map((task) => (
                <Task key={task.id} task={task} />
              ))
            ) : (
              <p>Aucune tâche pour le moment.</p>
            )}*/}
          </div>
        </div>
      </div>
    </div>
  );
}

export default ProfilePage;


/*import React, { useContext, useEffect } 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 SettingsModal from "./components/SettingsModal/SettingsModal.jsx";

function ProfilePage() {

    const { user, update } = useContext(AuthContext);

    useEffect(() => {
      update();
    }, [])

  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>
            <div className={styles.topDescription}>
              <div className={`${styles.infoBlock} glassBorder`}>
                <p><strong>Role :</strong> {user?.role}</p>
                <p><strong>Membre depuis :</strong> {user && formatDate(user.created_at)}</p>
              </div>
              <div className={`${styles.infoBlock} glassBorder`}>
                <p><strong>Mail :</strong> {user?.email} </p>
                <p><strong>Téléphone :</strong> {user?.phone === null ? "Pas de numéro enregistré" : user?.phone}</p>
              </div>
              <div className={styles.settingImage}>
                <SettingsModal />
              </div>
            </div>

            <h2>Tâches :</h2>
              {user && user.tasks.length > 0 ? (
                  user.tasks.map((task, index) => (
                      <Task key={index} task={task} />
                  ))
              ) : (
                  <p>Aucune tâche pour le moment.</p>
              )}

          </div>
        </div>
      </div>
    </div>
  );
}

export default ProfilePage;*/