"use client";
import React from "react";
import { useEffect, useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Eye, Send, FileBox, Check, CircleUser } from "lucide-react";
import Image from "next/image";
import { Button } from "@/components/ui/button";

type CsvFile = {
  name: string;
  csvLink: string;
};

const ContactModal = () => {
  const [csvFiles, setCsvFiles] = useState<CsvFile[]>([]);
  console.log(csvFiles);

  useEffect(() => {
    const fetchCsvFiles = async () => {
      try {
        const response = await fetch("/api/fetchcsv");
        if (!response.ok) {
          throw new Error("Failed to fetch CSV files");
        }
        const data: CsvFile[] = await response.json();
        setCsvFiles(data);
      } catch (error) {
        console.error("Error fetching CSV files:", error);
      }
    };

    fetchCsvFiles();
  }, []); // Only run on mount
  return (
    <div>
      <Dialog>
        <DialogTrigger className="px-4 bg-white text-black py-2 rounded-md">
          <FileBox size={20} />
        </DialogTrigger>
        <DialogContent className="h-5/6 w-5/6 bg-[#222222]">
          <DialogHeader>
            <DialogTitle className="text-4xl tracking-tighter">
              Select Contacts
            </DialogTitle>
            <DialogDescription>
              Select a file to import contacts from.
            </DialogDescription>
          </DialogHeader>
          <section className="flex gap-2">
            <Select>
              <SelectTrigger className="w-1/6 rounded-xl">
                <SelectValue placeholder="Select Option" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="gsheets">
                  <div className="flex items-center gap-1">
                    <Image
                      src="/icons/Sheets.svg"
                      alt="Google Sheets Icon"
                      width={20}
                      height={20}
                    />
                    Google Sheets
                  </div>
                </SelectItem>
                <SelectItem value="system">
                  <div className="flex items-center gap-1">
                    <CircleUser size={20} />
                    Contact Manager
                  </div>
                </SelectItem>
              </SelectContent>
            </Select>
            <Select>
              <SelectTrigger className="w-4/6 rounded-xl">
                <SelectValue placeholder="Select File (.csv, .tsv)" />
              </SelectTrigger>
              <SelectContent>
                {csvFiles.map((file) => (
                  <SelectItem key={file.name} value={file.name}>
                    {file.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Button className="bg-[#34A853] h-9 rounded-xl w-1/6 text-white flex gap-2">
              <Check />
              Select
            </Button>
          </section>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default ContactModal;