"use client";

import { useEffect, useState } from "react";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import countries from "@/utils/CountryCode.json"; 

export default function CountryPickerModal({value,setValue}:any) {
  const [search, setSearch] = useState("");
  const [selectedCountry, setSelectedCountry] = useState<any>(value);
  const [open, setOpen] = useState(false);

  const filtered = countries.filter(
    (c) =>
      c.name.toLowerCase().includes(search.toLowerCase()) ||
      c.dial_code.includes(search)
  );

  useEffect(() => {
    if(value){
      setSelectedCountry(value)
    }
  }, [value])
  

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <div
          className="border px-3 py-2 rounded-md w-[120px] cursor-pointer"
          onClick={() => setOpen(true)}
        >
          {selectedCountry ? (
            <span>
              {selectedCountry.flag} +{selectedCountry.dial_code}
            </span>
          ) : (
            <span className="text-muted-foreground">Select country</span>
          )}
        </div>
      </DialogTrigger>
      <DialogContent className="max-w-md w-full max-h-[80vh] p-4">
        <Input
          placeholder="Search countries..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="mb-4"
        />
        <ScrollArea className="h-[60vh]">
          <div className="space-y-1">
            {filtered?.length>0 ? filtered.map((country) => (
              <div
                key={country.code}
                onClick={() => {
                  setSelectedCountry(country);
                  setValue(country);
                  setOpen(false);
                  setSearch("");
                }}
                className="flex items-center justify-between px-3 py-2 hover:bg-gray-100 cursor-pointer rounded-md"
              >
                <div className="flex items-center gap-2">
                  <span>{country.flag}</span>
                  <span>{country.name}</span>
                </div>
                <span className="text-muted-foreground">+{country.dial_code}</span>
              </div>
            )):
            <div className="w-full flex items-center justify-center">No data found!</div>}
          </div>
        </ScrollArea>
      </DialogContent>
    </Dialog>
  );
}