"use client";
import {
createElement,
useEffect,
useOptimistic,
useState,
useTransition,
} from "react";
import { ButtonWithTooltip } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { useTranslation } from "@/lib/i18n/client";
import {
useBookmarkDisplaySettings,
useBookmarkLayout,
useGridColumns,
} from "@/lib/userLocalSettings/bookmarksLayout";
import {
updateBookmarksLayout,
updateGridColumns,
updateImageFit,
updateShowNotes,
updateShowTags,
updateShowTitle,
} from "@/lib/userLocalSettings/userLocalSettings";
import {
Check,
Heading,
Image,
LayoutDashboard,
LayoutGrid,
LayoutList,
List,
LucideIcon,
NotepadText,
Settings,
Tag,
} from "lucide-react";
type LayoutType = "masonry" | "grid" | "list" | "compact";
const iconMap: Record<LayoutType, LucideIcon> = {
masonry: LayoutDashboard,
grid: LayoutGrid,
list: LayoutList,
compact: List,
};
export default function ViewOptions() {
const { t } = useTranslation();
const layout = useBookmarkLayout();
const gridColumns = useGridColumns();
const actualDisplaySettings = useBookmarkDisplaySettings();
const [tempColumns, setTempColumns] = useState(gridColumns);
const [, startTransition] = useTransition();
// Optimistic state for all toggles
const [optimisticDisplaySettings, setOptimisticDisplaySettings] =
useOptimistic(actualDisplaySettings);
const [optimisticLayout, setOptimisticLayout] = useOptimistic(layout);
const [optimisticImageFit, setOptimisticImageFit] = useOptimistic(
actualDisplaySettings.imageFit,
);
const showColumnSlider =
optimisticLayout === "grid" || optimisticLayout === "masonry";
// Update temp value when actual value changes
useEffect(() => {
setTempColumns(gridColumns);
}, [gridColumns]);
// Handlers with optimistic updates
const handleLayoutChange = (newLayout: LayoutType) => {
startTransition(async () => {
setOptimisticLayout(newLayout);
await updateBookmarksLayout(newLayout);
});
};
const handleShowNotesChange = (checked: boolean) => {
startTransition(async () => {
setOptimisticDisplaySettings({
...optimisticDisplaySettings,
showNotes: checked,
});
await updateShowNotes(checked);
});
};
const handleShowTagsChange = (checked: boolean) => {
startTransition(async () => {
setOptimisticDisplaySettings({
...optimisticDisplaySettings,
showTags: checked,
});
await updateShowTags(checked);
});
};
const handleShowTitleChange = (checked: boolean) => {
startTransition(async () => {
setOptimisticDisplaySettings({
...optimisticDisplaySettings,
showTitle: checked,
});
await updateShowTitle(checked);
});
};
const handleImageFitChange = (fit: "cover" | "contain") => {
startTransition(async () => {
setOptimisticImageFit(fit);
await updateImageFit(fit);
});
};
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<ButtonWithTooltip
tooltip={t("view_options.title")}
delayDuration={100}
variant="ghost"
>
<Settings size={18} />
</ButtonWithTooltip>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<div className="px-2 py-1.5 text-sm font-semibold">
{t("view_options.layout")}
</div>
{(Object.keys(iconMap) as LayoutType[]).map((key) => (
<DropdownMenuItem
key={key}
className="cursor-pointer justify-between"
onSelect={(e) => {
e.preventDefault();
handleLayoutChange(key);
}}
>
<div className="flex items-center gap-2">
{createElement(iconMap[key as LayoutType], { size: 18 })}
<span>{t(`layouts.${key}`)}</span>
</div>
{optimisticLayout === key && <Check className="ml-2 size-4" />}
</DropdownMenuItem>
))}
{showColumnSlider && (
<>
<DropdownMenuSeparator />
<div className="px-2 py-3">
<div className="mb-2 flex items-center justify-between">
<span className="text-sm font-semibold">
{t("view_options.columns")}
</span>
<span className="text-sm text-muted-foreground">
{tempColumns}
</span>
</div>
<Slider
value={[tempColumns]}
onValueChange={([value]) => setTempColumns(value)}
onValueCommit={([value]) => updateGridColumns(value)}
min={1}
max={6}
step={1}
className="w-full"
/>
<div className="mt-1 flex justify-between text-xs text-muted-foreground">
<span>1</span>
<span>6</span>
</div>
</div>
</>
)}
<DropdownMenuSeparator />
<div className="px-2 py-1.5 text-sm font-semibold">
{t("view_options.display_options")}
</div>
<div className="space-y-3 px-2 py-2">
<div className="flex items-center justify-between">
<Label
htmlFor="show-notes"
className="flex cursor-pointer items-center gap-2 text-sm"
>
<NotepadText size={16} />
<span>{t("view_options.show_note_previews")}</span>
</Label>
<Switch
id="show-notes"
checked={optimisticDisplaySettings.showNotes}
onCheckedChange={handleShowNotesChange}
/>
</div>
<div className="flex items-center justify-between">
<Label
htmlFor="show-tags"
className="flex cursor-pointer items-center gap-2 text-sm"
>
<Tag size={16} />
<span>{t("view_options.show_tags")}</span>
</Label>
<Switch
id="show-tags"
checked={optimisticDisplaySettings.showTags}
onCheckedChange={handleShowTagsChange}
/>
</div>
<div className="flex items-center justify-between">
<Label
htmlFor="show-title"
className="flex cursor-pointer items-center gap-2 text-sm"
>
<Heading size={16} />
<span>{t("view_options.show_title")}</span>
</Label>
<Switch
id="show-title"
checked={optimisticDisplaySettings.showTitle}
onCheckedChange={handleShowTitleChange}
/>
</div>
</div>
<DropdownMenuSeparator />
<div className="px-2 py-1.5 text-sm font-semibold">
{t("view_options.image_options")}
</div>
<div className="space-y-1 px-2 py-2">
<DropdownMenuItem
className="cursor-pointer justify-between"
onSelect={(e) => {
e.preventDefault();
handleImageFitChange("cover");
}}
>
<div className="flex items-center gap-2">
<Image size={16} />
<span>{t("view_options.image_fit_cover")}</span>
</div>
{optimisticImageFit === "cover" && (
<Check className="ml-2 size-4" />
)}
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer justify-between"
onSelect={(e) => {
e.preventDefault();
handleImageFitChange("contain");
}}
>
<div className="flex items-center gap-2">
<Image size={16} />
<span>{t("view_options.image_fit_contain")}</span>
</div>
{optimisticImageFit === "contain" && (
<Check className="ml-2 size-4" />
)}
</DropdownMenuItem>
</div>
</DropdownMenuContent>
</DropdownMenu>
);
}
