/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./donations.module.scss"
import { useState } from "react";
import { MdOutlineEditLocationAlt, MdDeleteForever } from "react-icons/md";

const ProjectDonations = ({ project } : any) => {
      const [activeState, setActiveState] = useState(1);
    
      const toggleActiveState = (key: number) => setActiveState(key);

      const donations = [
        { id: 1, name: "Usuoyibo Achilles", phone: "08103515205", amount: 5000000 }, 
        { id: 2, name: "Usuoyibo Achilles", phone: "08103515205", amount: 5000000 },
        { id: 3, name: "Usuoyibo Achilles", phone: "08103515205", amount: 5000000 }
      ]

      const materials = [
        { id: 1, name: "Usuoyibo Ewomamena", phone: "08103515205", description: "2 trips of sand for the projects" }, 
        { id: 2, name: "Usuoyibo Ewomamena", phone: "08103515205", description: "2 trips of sand for the projects" }, 
        { id: 3, name: "Usuoyibo Ewomamena", phone: "08103515205", description: "2 trips of sand for the projects" }
      ]

      const prompt = () => alert("I have been clicked")
    
  return (
    <div className={ styles["donations"] }>
        <div className={ styles["donations--header"] }>
            <h1>Project Donations and Support</h1>
            <p>View and manage all the donations and supports that has been made towards this project</p>
        </div>
        <div className={styles["donations__tab"]}>
            <div
              onClick={() => toggleActiveState(1)}
              className={
                activeState === 1
                  ? styles["donations__tab--active"]
                  : styles["donations__tab--item"]
              }
            >
              Money Donations
            </div>

             <div
              onClick={() => toggleActiveState(2)}
              className={
                activeState === 2
                  ? styles["donations__tab--active"]
                  : styles["donations__tab--item"]
              }
            >
              Material Support
            </div>
          </div>

          <div className={styles["donations__children"]}>
            { activeState === 1 ? 
                <div>
                    { donations?.map((donation: any) => (
                        <div className={styles["donations__children--item"]} key={donation.id}>
                            <span>{ donation?.name }</span>
                            <span>{ donation?.phone }</span>
                            <span>#{ Number(donation?.amount).toLocaleString("en-US") }</span>
                            <div className={styles["donations__children--item--buttons"]}>
                                <MdOutlineEditLocationAlt
                                    onClick={prompt}
                                    style={{ cursor: "pointer" }}
                                    size="1.2rem"
                                    color="#22C55E"
                                />
                                <MdDeleteForever
                                    onClick={prompt}
                                    style={{ cursor: "pointer" }}
                                    size="1.2rem"
                                    color="#EF4444"
                                />
                            </div>
                        </div>
                    )) }
                </div>
            : null }
          </div>

        { activeState === 2  ? 
          <div className={styles["donations__material"]}>
                <div>
                    { materials?.map((materia: any) => (
                        <div className={styles["donations__materials--item"]} key={materia.id}>
                            <span>{ materia?.name }</span>
                            <span>{ materia?.phone }</span>
                            <span>{ materia?.description }</span>
                            <div className={styles["donations__materials--item--buttons"]}>
                                <MdOutlineEditLocationAlt
                                    onClick={prompt}
                                    style={{ cursor: "pointer" }}
                                    size="1.2rem"
                                    color="#22C55E"
                                />
                                <MdDeleteForever
                                    onClick={prompt}
                                    style={{ cursor: "pointer" }}
                                    size="1.2rem"
                                    color="#EF4444"
                                />
                            </div>
                        </div>
                    )) }
                </div>
          </div>    : null }
    </div>
  )
}

export default ProjectDonations