"use client";

import React, { useState } from "react";
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import Icon from "../ui/icon";
import { Counter } from "../ui/counter";
import { ChevronUp, ChevronDown } from "lucide-react";

interface GuestPickerProps {
    onApply?: (adults: number, children: number) => void;
    className?: string;
    showIcon?: boolean;
}

export const GuestPicker: React.FC<GuestPickerProps> = ({ onApply, showIcon = true }) => {
    const [adults, setAdults] = useState<number>(0);
    const [children, setChildren] = useState<number>(0);
    const [isOpen, setIsOpen] = useState<boolean>(false);

    const handleApply = () => {
        onApply?.(adults, children);
        setIsOpen(false);
    };

    const getDisplayText = () => {
        const total = adults + children;
        if (total === 0) return "Сколько гостей?";
        if (children === 0)
            return `${adults} ${adults === 1 ? "взрослый" : "взрослых"}`;
        return `${adults} ${
            adults === 1 ? "взрослый" : "взрослых"
        }, ${children} ${children === 1 ? "ребенок" : "детей"}`;
    };

    return (
        <div>
            <Popover
                open={isOpen}
                onOpenChange={setIsOpen}
            >
                <PopoverTrigger asChild>
                    <Button
                        variant="outline"
                        className="h-[64px] px-4 w-full justify-between"
                    >
                        <div className="flex items-center">
                            {showIcon && (
                                <Icon
                                    name="people"
                                    className="mr-3"
                                />
                            )}
                            <span className="font-normal">{getDisplayText()}</span>
                        </div>
                        {isOpen ? (
                            <ChevronUp className="h-4 w-4" />
                        ) : (
                            <ChevronDown className="h-4 w-4" />
                        )}
                    </Button>
                </PopoverTrigger>
                <PopoverContent className="rounded-[20px] p-6 pb-4 w-56">
                    <div className="mb-4">
                        <Counter
                            label="Взрослые"
                            value={adults}
                            onChange={setAdults}
                            min={0}
                            max={10}
                        />
                    </div>
                    <div className="mb-4">
                        <Counter
                            label="Дети"
                            value={children}
                            onChange={setChildren}
                            min={0}
                            max={10}
                        />
                    </div>
                    <Button
                        onClick={handleApply}
                        variant="gradient"
                        className="font-bold text-white h-[44px] w-full px-8"
                    >
                        Применить
                    </Button>
                </PopoverContent>
            </Popover>
        </div>
    );
};
