'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,
  isOpenAllowed = true,
  triggerClassName
}: 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={(isOpen) => {
        if (isOpen && !isOpenAllowed) {
          
          return;
        }
        setOpen(isOpen);
      }}
    >
      <DialogTrigger asChild>
        <div
          className={triggerClassName || "w-[120px] cursor-pointer rounded-md border px-3 py-2"}
          onClick={() => {
            if (isOpenAllowed) {
              setOpen(true);
            }
          }}
        >
          {selectedCountry ? (
            <span className="flex items-center gap-1 whitespace-nowrap">
              {selectedCountry.flag} +{selectedCountry.dial_code}
            </span>
          ) : (
            <span className="text-muted-foreground">Select country</span>
          )}
        </div>
      </DialogTrigger>
      <DialogContent className="max-h-[80vh] w-full max-w-md 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 cursor-pointer items-center justify-between rounded-md px-3 py-2 hover:bg-gray-100"
                >
                  <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="flex items-center gap-2">
                <span>No data found!</span>
              </div>
            )}
          </div>
        </ScrollArea>
      </DialogContent>
    </Dialog>
  );
}