Untitled

"use client";
import React, {useState, useEffect} from "react";
import Customer from "@/models/customer";
import {Dropdown, DropdownChangeEvent} from "primereact/dropdown";
import Environment from "@/models/environment";
import Project from "@/models/project";




interface Customer {
    name: string;
}
interface Environment {
    name: string;
}

interface Project {
    name: string;
    ssl_url: string;
}

export default function AddApplication(){
    const [customers, setCustomers] = useState<Customer[]>([]);
    const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null);

    const [projects, setProjects] = useState<Project[]>([]);
    const [selectedProject, setSelectedProject] = useState<Project | null>(null);

    const [environments, setEnvironments] = useState<Environment[]>([]);
    const [selectedEnvironment, setSelectedEnvironment] = useState<Environment | null>(null);

    useEffect(() => {
        fetch("http://localhost:3000/api/customers")
            .then((res) => res.json())
            .then((customerData) => {
                if (Array.isArray(customerData)) {
                    setCustomers(customerData);
                } else {
                    console.error("Customers data is not an array");
                }
            })
            .catch((error) => {
                console.error("Error fetching customer data:", error);
            });
    }, []);

    useEffect(() => {
        fetch("http://localhost:3000/api/environment")
            .then((res) => res.json())
            .then((environmentData) => {
                if (Array.isArray(environmentData)) {
                    setEnvironments(environmentData);
                } else {
                    console.error("Environment data is not an array");
                }
            })
            .catch((error) => {
                console.error("Error fetching environment data:", error);
            });
    }, []);

    useEffect(() => {
        fetch("http://localhost:3000/api/project")
            .then((res) => res.json())
            .then((projectData) => {
                if (Array.isArray(projectData)) {
                    setProjects(projectData);
                } else {
                    console.error("Projects data is not an array");
                }
            })
            .catch((error) => {
                console.error("Error fetching project data:", error);
            });
    }, []);

    return (
        <form>
            <div className="card flex justify-content-center">
                <Dropdown
                    value={selectedCustomer ? selectedCustomer : null}
                    onChange={(e: DropdownChangeEvent) => setSelectedCustomer(e.value)}
                    options={customers}
                    optionLabel="name"
                    showClear
                    placeholder="Select a Customer"
                    className="w-full md:w-14rem"
                />
            </div>
            <div>
                <Dropdown
                    value={selectedEnvironment ? selectedEnvironment : null}
                    onChange={(e: DropdownChangeEvent) => setSelectedEnvironment(e.value)}
                    options={environments}
                    optionLabel="name"
                    showClear
                    placeholder="Select an Environment"
                    className="w-full md:w-14rem"
                />
            </div>
            <div>
                <Dropdown
                    value={selectedProject ? selectedProject : null}
                    onChange={(e: DropdownChangeEvent) => setSelectedProject(e.value)}
                    options={projects}
                    optionLabel="name"
                    showClear
                    placeholder="Select a Project"
                    className="w-full md:w-14rem"
                />
            </div>
            <button className="bg-green-600 font-bold text-white py-3 px-6 w-fit">
                Add Application
            </button>
        </form>
    );
}

{/*<div>*/}
        {/*    <h1>{selectedCustomer?.name}</h1>*/}
        {/*</div>*/}
//     const [isVisible, setIsVisible] = useState(true);
//     const [selectedCustomer, setSelectedCustomer] = useState<any | null>(null);
//     const [selectedProject, setSelectedProject] = useState<any | null>(null);
//     const [selectedEnvironment, setSelectedEnvironment] = useState<any | null>(null);
//     const [ssl_url, setSsl_Url] = useState("");
//
//     // const customers: Customer[] = [
//     //     { name: 'Gemeente Eindhoven' },
//     //     { name: 'Provincie Zeeland' },
//     // ];
//     // const environments: Environment[] = [
//     //     { name: 'Env1' },
//     //     { name: 'Env2' },
//     // ];
//     //
//     // const projects: Project[] = [
//     //     { name: 'Portal' },
//     //     { name: 'Backoffice' },
//     // ];
//
//     const router = useRouter();
//     const handleClose = () => {
//         setIsVisible(false);
//     };
//
//     // const handleSubmit = async (e: any) => {
//     //     e.preventDefault();
//
//         try{
//             const res =  await fetch('http://localhost:3000/api/application',{
//                 method: "POST",
//                 headers: {
//                     "Content-type": "application/json"
//                 },
//                 body: JSON.stringify({selectedCustomer, selectedEnvironment, selectedProject, ssl_url}),
//
//             });
//             if (res.ok){
//                 handleClose();
//                 router.refresh();
//                 router.push('/application');
//
//             } else {
//                 throw new Error('failed to create an application.');
//             }
//         } catch (error){
//             console.log(error);
//         }
//     }
//     return isVisible ? (
//         <form onSubmit={handleSubmit} className="flex flex-col gap-3">
//             <div className="card flex justify-content-center">
//                 <Dropdown value={selectedCustomer} onChange={(e: DropdownChangeEvent) => setSelectedCustomer(e.value)} options={customers} optionLabel="name"
//                           showClear placeholder="Select a Customer" className="w-full md:w-14rem" />
//             </div>
//             <div className="card flex justify-content-center">
//                 <Dropdown value={selectedEnvironment} onChange={(e: DropdownChangeEvent) => setSelectedEnvironment(e.value)} options={environments} optionLabel="name"
//                           showClear placeholder="Select an Environment" className="w-full md:w-14rem" />
//             </div>
//
//             <div className="card flex justify-content-center">
//                 <Dropdown value={selectedProject} onChange={(e: DropdownChangeEvent) => setSelectedProject(e.value)} options={projects} optionLabel="name"
//                           showClear placeholder="Select a Project" className="w-full md:w-14rem" />
//             </div>
//
//             <input
//                 onChange={(e) => setSSL(e.target.value)}
//                 value={ssl_url}
//                 className="border border-slate-500 px-8 py-2"
//                 type="text"
//                 placeholder="SSL"
//             />
//             <button className="bg-green-600 font-bold text-white py-3 px-6 w-fit">
//                 Add Application
//             </button>
//         </form>
//     ) : null;
// }