import { ChevronDown } from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

export const WEEKDAYS = [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
    'Sunday',
];

/**
 * Ringkasan hari terbit untuk template Daily. Kosong berarti setiap hari —
 * arti yang sama dipakai server, jadi template lama yang belum punya pilihan
 * tetap terbaca benar di layar.
 */
export function describeDailyDays(days: string[] = []): string {
    const selected = WEEKDAYS.filter((day) => days.includes(day));

    return selected.length === 0 || selected.length === WEEKDAYS.length
        ? 'Setiap hari'
        : selected.join(', ');
}

interface DailyDaysSelectProps {
    value: string[];
    onChange: (days: string[]) => void;
}

export function DailyDaysSelect({ value, onChange }: DailyDaysSelectProps) {
    const toggle = (day: string, checked: boolean) =>
        // Urutannya dikembalikan ke urutan minggu, bukan urutan klik, supaya
        // ringkasan hari selalu terbaca Senin lebih dulu.
        onChange(
            WEEKDAYS.filter((weekday) =>
                weekday === day ? checked : value.includes(weekday),
            ),
        );

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button
                    type="button"
                    variant="outline"
                    className="w-full justify-between rounded-xl font-normal"
                >
                    <span className="truncate">{describeDailyDays(value)}</span>
                    <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-56 rounded-xl">
                {WEEKDAYS.map((day) => (
                    <DropdownMenuCheckboxItem
                        key={day}
                        checked={value.includes(day)}
                        // Menu tetap terbuka supaya beberapa hari bisa dipilih
                        // dalam satu kali buka.
                        onSelect={(event) => event.preventDefault()}
                        onCheckedChange={(checked) => toggle(day, checked)}
                    >
                        {day}
                    </DropdownMenuCheckboxItem>
                ))}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}