/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./project.module.scss"
import { MdLocationPin, MdTimer, MdRemoveRedEye, MdDeleteForever, MdOutlineEditLocation } from "react-icons/md"
import { formatDateReadable } from "@/lib/utils"
import CreateProjectModal from "../../modals/create-project-modal"
import { useState } from "react"
import DeleteModal from "../../modals/delete-modal"
import { router } from "@inertiajs/react"

interface projectProps {
    project: any
}

const ProjectItem: React.FC<projectProps> = ({ project }) => {
    const {id, name, location, status, description, created_at } = project

    const [updateModal, setUpdateModal] = useState(false)

    const [deleteModal, setDeleteModal] = useState(false)

    const toggleUpdateModal = () => setUpdateModal(!updateModal)

    const toggleDeleteModal = () => setDeleteModal(!deleteModal)

    const goToDetails = () => {
        router.visit(route("project_show", id)); 
    };

  return (
    <>
    { updateModal ? <CreateProjectModal project={project} type="update" closeModal={ toggleUpdateModal } />  : null}

    { deleteModal ? <DeleteModal closeModal={toggleDeleteModal} deleteUrl={ route("project_delete", project.id) }/> : null }
    <div className={ styles["project"] }>
        <div className={ styles["project__text"] }>
            <div className={ styles["project__text--top"] }>
                <h1>{ name }</h1>
                <span className={status === "on-going" ? styles["project__text--top--ongoing"] : status === "pending" ? styles["project__text--top--pending"] : styles["project__text--top--completed"] }>{ status }</span>
            </div>

             <div className={ styles["project__text__footer"] }>
                <div className={ styles["project__text__footer--item"] }>
                    <MdLocationPin />&nbsp;{ location }
                </div>
                <div className={ styles["project__text__footer--item"] }>
                    <MdTimer />&nbsp;{ formatDateReadable(created_at) }
                </div>
            </div>

            <div className={ styles["project__text--body"] }>
                <p>{ description }</p>
            </div>

            <div className={ styles["project__text__buttons"] }>
                <div onClick={ goToDetails } className={ styles["project__text__buttons--view"] }>
                    See Details <MdRemoveRedEye size="1.2rem"  />
                </div>

                <div onClick={toggleUpdateModal} className={ styles["project__text__buttons--update"] }>
                    Update <MdOutlineEditLocation size="1.2rem"  />
                </div>

                <div onClick={toggleDeleteModal} className={ styles["project__text__buttons--delete"] }>
                    Delete <MdDeleteForever size="1.2rem" />
                </div>
            </div>
        </div>
    </div>
    </>
  )
}

export default ProjectItem