import React from "react";
import {useEffect, useState} from "react";
import api from "../api.js";
import ProjectCreateModal from "../components/ProjectCreateModal.jsx";
import ProjectPunchlistModal from "../components/ProjectPunchlistModal.jsx";
import ProjectCloseModal from "../components/ProjectCloseModal.jsx";

export default function ProjectsModule() {
    const [stores, setStores] = useState([])
    const [loading, setLoading] = useState(false)
    const [loadingProjects, setLoadingProjects] = useState(false)
    const [projects, setProjects] = useState([])
    useEffect(() => {
        const fetchProjects = async () => {
            setLoadingProjects(true);
            try {
                const response = await api.get('projects/');
                if (response.status === 200) {
                    setProjects(response.data);
                }
            } catch (error) {
                alert(error);
            } finally {
                setLoadingProjects(false);
            }
        };
        const fetchStores = async () => {
            setLoading(true);
            try {
                const response = await api.get('/stores/');
                if (response.status === 200) {
                    const sortedStores = [...response.data].sort((a, b) => a.store - b.store);
                    setStores(sortedStores);
                }
            } catch (error) {
                alert(error);
            } finally {
                setLoading(false);
            }
        };
        fetchStores();
        fetchProjects();
    }, []);
    return (
        <div>
            <div className="d-flex flex-row align-items-center justify-content-center p-2">
                <h4>Upcoming</h4>
            </div>
            {loadingProjects ? <div className="d-flex align-items-center"><h4 className="m-2 p-2">Loading Projects...</h4><div className="m-2 spinner-border"></div></div> :
                <div className="accordion p-2" id="projectsAccordion">
                    {projects.filter(proj => proj.status === 'Open').map(proj => (
                        <div key={proj.id} className="accordion-item">
                            <h2 className="accordion-header">
                                <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target={`#collapse${proj.id}`} aria-expanded="false" aria-controls={`collapse${proj.id}`}>
                                    {proj.date} - #{proj.store} - {proj.city}
                                </button>
                            </h2>
                            <div id={`collapse${proj.id}`} className="accordion-collapse collapse" data-bs-parent="#projectsAccordion">
                                <div className="accordion-body">
                                    <div className="d-flex flex-row align-items-center">
                                        {proj.punchlist === null ? <ProjectPunchlistModal proj={proj}/> : null}
                                        {proj.status === 'Open' ? <ProjectCloseModal proj={proj}/> : null}
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>}
            <div className="d-flex align-items-center justify-content-center p-2">
                <h4>Stores</h4>
            </div>
            {loading ? <div className="d-flex align-items-center"><h4 className="m-2 p-2">Loading Stores...</h4><div className="m-2 spinner-border"></div></div> :
                <div className="accordion p-2" id="storesAccordion">
                    {stores.map(loc => (
                        <div key={loc.id} className="accordion-item">
                            <h2 className="accordion-header">
                                <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target={`#collapse${loc.id}`} aria-expanded="false" aria-controls={`collapse${loc.id}`}>
                                    #{loc.store} - {loc.city}
                                </button>
                            </h2>
                            <div id={`collapse${loc.id}`} className="accordion-collapse collapse" data-bs-parent="#storesAccordion">
                                <div className="accordion-body">
                                    <p>{loc.street_address}, {loc.city}, {loc.state} {loc.zip_code}</p>
                                    <p>Entity: {loc.entity}</p>
                                    <p>Phone: {loc.phone}</p>
                                    <p>Store Contact: {loc.store_contact}</p>
                                    <p>Store Email: {loc.store_contact_email}</p>
                                    <p>Supervisor Contact: {loc.super_contact}</p>
                                    <p>Supervisor Email: {loc.super_contact_email}</p>
                                    <ProjectCreateModal loc={loc}/>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            }
        </div>
    )
}