"use client";
import { useState, useMemo } from "react";
import { Globe, Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
const languages = [
{ code: "en", name: "English", native: "English" },
{ code: "es", name: "Spanish", native: "Español" },
{ code: "fr", name: "French", native: "Français" },
{ code: "de", name: "German", native: "Deutsch" },
{ code: "pt", name: "Portuguese", native: "Português" },
{ code: "it", name: "Italian", native: "Italiano" },
{ code: "nl", name: "Dutch", native: "Nederlands" },
{ code: "pl", name: "Polish", native: "Polski" },
{ code: "ru", name: "Russian", native: "Русский" },
{ code: "ja", name: "Japanese", native: "日本語" },
{ code: "ko", name: "Korean", native: "한국어" },
{ code: "zh", name: "Chinese", native: "中文" },
{ code: "ar", name: "Arabic", native: "العربية" },
{ code: "hi", name: "Hindi", native: "हिन्दी" },
];
const regions = [
{ code: "US", name: "United States", flag: "🇺🇸", timezone: "America/New_York" },
{ code: "GB", name: "United Kingdom", flag: "🇬🇧", timezone: "Europe/London" },
{ code: "CA", name: "Canada", flag: "🇨🇦", timezone: "America/Toronto" },
{ code: "AU", name: "Australia", flag: "🇦🇺", timezone: "Australia/Sydney" },
{ code: "DE", name: "Germany", flag: "🇩🇪", timezone: "Europe/Berlin" },
{ code: "FR", name: "France", flag: "🇫🇷", timezone: "Europe/Paris" },
{ code: "ES", name: "Spain", flag: "🇪🇸", timezone: "Europe/Madrid" },
{ code: "IT", name: "Italy", flag: "🇮🇹", timezone: "Europe/Rome" },
{ code: "NL", name: "Netherlands", flag: "🇳🇱", timezone: "Europe/Amsterdam" },
{ code: "BR", name: "Brazil", flag: "🇧🇷", timezone: "America/Sao_Paulo" },
{ code: "MX", name: "Mexico", flag: "🇲🇽", timezone: "America/Mexico_City" },
{ code: "JP", name: "Japan", flag: "🇯🇵", timezone: "Asia/Tokyo" },
{ code: "KR", name: "South Korea", flag: "🇰🇷", timezone: "Asia/Seoul" },
{ code: "CN", name: "China", flag: "🇨🇳", timezone: "Asia/Shanghai" },
{ code: "IN", name: "India", flag: "🇮🇳", timezone: "Asia/Kolkata" },
{ code: "SG", name: "Singapore", flag: "🇸🇬", timezone: "Asia/Singapore" },
];
export const title = "React Dialog Block Language Region Selector";
export default function DialogLanguageRegion() {
const [open, setOpen] = useState(false);
const [selectedLanguage, setSelectedLanguage] = useState("en");
const [selectedRegion, setSelectedRegion] = useState("US");
const [languageSearch, setLanguageSearch] = useState("");
const [regionSearch, setRegionSearch] = useState("");
const filteredLanguages = useMemo(() => {
const search = languageSearch.toLowerCase();
return languages.filter(
(lang) =>
lang.name.toLowerCase().includes(search) ||
lang.native.toLowerCase().includes(search) ||
lang.code.toLowerCase().includes(search)
);
}, [languageSearch]);
const filteredRegions = useMemo(() => {
const search = regionSearch.toLowerCase();
return regions.filter(
(region) =>
region.name.toLowerCase().includes(search) ||
region.code.toLowerCase().includes(search)
);
}, [regionSearch]);
const currentLanguage = languages.find((l) => l.code === selectedLanguage);
const currentRegion = regions.find((r) => r.code === selectedRegion);
const handleSave = () => {
console.log({ language: selectedLanguage, region: selectedRegion });
setOpen(false);
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<Globe className="mr-2 h-4 w-4" />
{currentRegion?.flag} {currentLanguage?.native}
</Button>
</DialogTrigger>
</div>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Language & Region</DialogTitle>
<DialogDescription>
Choose your preferred language and region for a personalized
experience.
</DialogDescription>
</DialogHeader>
<Tabs defaultValue="language" className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="language">Language</TabsTrigger>
<TabsTrigger value="region">Region</TabsTrigger>
</TabsList>
<TabsContent value="language" className="space-y-4 mt-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
placeholder="Search languages..."
value={languageSearch}
onChange={(e) => setLanguageSearch(e.target.value)}
className="pl-9"
/>
</div>
<div className="h-[200px] overflow-y-auto rounded-md border p-2">
<RadioGroup
value={selectedLanguage}
onValueChange={setSelectedLanguage}
>
{filteredLanguages.map((lang) => (
<div
key={lang.code}
className="flex items-center space-x-3 rounded-md p-2 hover:bg-muted cursor-pointer"
onClick={() => setSelectedLanguage(lang.code)}
>
<RadioGroupItem value={lang.code} id={`lang-${lang.code}`} />
<Label
htmlFor={`lang-${lang.code}`}
className="flex-1 cursor-pointer flex items-center justify-between"
>
<span>{lang.native}</span>
<span className="text-sm text-muted-foreground">
{lang.name}
</span>
</Label>
</div>
))}
{filteredLanguages.length === 0 && (
<p className="text-sm text-muted-foreground text-center py-4">
No languages found
</p>
)}
</RadioGroup>
</div>
</TabsContent>
<TabsContent value="region" className="space-y-4 mt-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
placeholder="Search countries..."
value={regionSearch}
onChange={(e) => setRegionSearch(e.target.value)}
className="pl-9"
/>
</div>
<div className="h-[200px] overflow-y-auto rounded-md border p-2">
<RadioGroup
value={selectedRegion}
onValueChange={setSelectedRegion}
>
{filteredRegions.map((region) => (
<div
key={region.code}
className="flex items-center space-x-3 rounded-md p-2 hover:bg-muted cursor-pointer"
onClick={() => setSelectedRegion(region.code)}
>
<RadioGroupItem
value={region.code}
id={`region-${region.code}`}
/>
<Label
htmlFor={`region-${region.code}`}
className="flex-1 cursor-pointer flex items-center gap-3"
>
<span className="text-xl">{region.flag}</span>
<span>{region.name}</span>
</Label>
</div>
))}
{filteredRegions.length === 0 && (
<p className="text-sm text-muted-foreground text-center py-4">
No regions found
</p>
)}
</RadioGroup>
</div>
</TabsContent>
</Tabs>
<DialogFooter>
<Button variant="outline" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button onClick={handleSave}>Save</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}