"use client";
import VCardExport from "@/components/VCardExport";
import VCardForm from "@/components/VCardForm";
import { useState } from "react";
import { SelectionItem } from "@/lib/definitions";

export default function Home() {
  // Declare and initialize selection array
  const [section, setSection] = useState("form");
  const [selection, setSelection] = useState<SelectionItem[]>([
    {
      field: "Vorname",
      value: "",
      placeholder: "Max",
      required: true,
    },
    {
      field: "Nachname",
      value: "",
      placeholder: "Mustermann",
      required: true,
    },
    {
      field: "Spitzname",
      value: "",
      placeholder: "Maxi",
      required: false,
    },
    {
      field: "Email",
      value: "",
      placeholder: "max@example.com",
      required: false,
    },
    {
      field: "Telefonnummer (Zuhause)",
      value: "",
      placeholder: "+49 123 456789",
      required: false,
    },
    {
      field: "Telefonnummer (Mobile)",
      value: "",
      placeholder: "+49 123 456789",
      required: false,
    },
    {
      field: "Telefonnummer (Arbeit)",
      value: "",
      placeholder: "+49 123 456789",
      required: false,
    },
    {
      field: "Land",
      value: "",
      placeholder: "Deutschland",
      required: false,
    },
    {
      field: "Ort",
      value: "",
      placeholder: "Musterstadt",
      required: false,
    },
    {
      field: "Straße",
      value: "",
      placeholder: "Musterstraße 1",
      required: false,
    },
    {
      field: "Postleitzahl",
      value: "",
      placeholder: "12345",
      required: false,
    },
    {
      field: "Geburtstag",
      value: "",
      placeholder: "1990-01-01 (jahr-monat-tag)",
      required: false,
    },
    {
      field: "Firma",
      value: "",
      placeholder: "Beispiel GmbH",
      required: false,
    },
    {
      field: "Abteilung",
      value: "",
      placeholder: "Entwicklung",
      required: false,
    },
    {
      field: "Berufsbezeichnung",
      value: "",
      placeholder: "Softwareentwickler",
      required: false,
    },
    {
      field: "Rolle im Unternehmen",
      value: "",
      placeholder: "Projektleiter",
      required: false,
    },
    {
      field: "Homepage/Persönliche Webseite",
      value: "",
      placeholder: "https://example.com",
      required: false,
    },
    {
      field: "Notizen",
      value: "",
      placeholder: "Zusätzliche Informationen...",
      required: false,
    },
  ]);
  const [vcardData, setVcardData] = useState<string>("");

  // Setting value for field when value changes
  const handleValueChange = (field: string, value: string) => {
    setSelection((prev) =>
      prev.map((item) => (item.field === field ? { ...item, value } : item)),
    );
  };

  const handleSectionChange = (section: string) => {
    setSection(section);
  };

  return (
    <div className="flex flex-col items-center mt-5 min-h-screen">
      <h1 className="text-2xl font-bold mb-8">Leo&apos;s VCard Generator</h1>
      {/* Show Component based on section */}
      <div className="flex justify-center gap-8 w-full">
        {section == "form" && (
          <VCardForm
            selection={selection}
            onValueChange={handleValueChange}
            sectionChange={handleSectionChange}
            onGenerate={(data: any) => setVcardData(data)}
          />
        )}
        {section == "export" && (
          <VCardExport
            sectionChange={handleSectionChange}
            vcardText={vcardData}
          />
        )}
      </div>
    </div>
  );
}