'use client';

import React, { useState, useEffect, useMemo } from "react";
import Button from "@/components/button/PrimaryButton";
import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
import ComboBox, { ComboboxOption } from "@/components/combobox/Combobox";
import { Switch } from "@/components/ui/switch";
import { TicketPercentIcon } from "lucide-react";

type MenuFilterDrawerProps = {
  visible: boolean;
  onClose: () => void;
  selectedIngredients: string;
  selectedDeliveryId: string;
  onIngredientsChange: (value: string) => void;
  onDeliveryChange: (value: string) => void;
  onApply: () => void;
  tMenu: (key: string) => string;
};

const MenuFilterDrawer = ({
  visible,
  onClose,
  selectedIngredients,
  selectedDeliveryId,
  onIngredientsChange,
  onDeliveryChange,
  onApply,
  tMenu,
}: MenuFilterDrawerProps) => {
  const [tempIngredients, setTempIngredients] = useState(selectedIngredients);
  const [tempDeliveryId, setTempDeliveryId] = useState(selectedDeliveryId);

  useEffect(() => {
    if (visible) {
      setTempIngredients(selectedIngredients);
      setTempDeliveryId(selectedDeliveryId);
    }
  }, [visible, selectedIngredients, selectedDeliveryId]);

  const serviceOptions: Array<ComboboxOption> = useMemo(() => {
    return [
      {
        id: "0",
        title: tMenu("MenuFilterDrawer.SelectDelivery.Options.All") || "همه",
        label: "",
      },
      {
        id: "pickup",
        title: "بیرون بر",
        label: "",
      },
      {
        id: "inPlace",
        title: "سرو در رستوران",
        label: "",
      },
    ];
  }, [tMenu]);

  const handleIngredientsChange = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    setTempIngredients(e.target.value);
  };

  const handleDeliveryChange = (
    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
    index: number
  ) => {
    e.stopPropagation();
    setTempDeliveryId(serviceOptions[index]?.id ?? serviceOptions[0].id);
  };

  const handleApply = () => {
    onIngredientsChange(tempIngredients);
    onDeliveryChange(tempDeliveryId);
    onApply();
    onClose();
  };

  const handleCancel = () => {
    setTempIngredients(selectedIngredients);
    setTempDeliveryId(selectedDeliveryId);
    onClose();
  };

  return (
    <AnimatedBottomSheet
      title={tMenu("MenuFilterDrawer.Heading")}
      visible={visible}
      outDelay={150}
      onClick={onClose}
    >
      <div className="px-6 mt-5">
        <div className="flex flex-col gap-2">
          <label className="text-sm2 text-foreground">
            {tMenu("MenuFilterDrawer.SelectContent.Label")}
          </label>
          <input
            type="text"
            value={tempIngredients}
            onChange={handleIngredientsChange}
            placeholder={tMenu("MenuFilterDrawer.SelectContent.Placeholder") || "محتویات را وارد کنید..."}
            className="w-full h-11 px-3 py-2.5 rounded-normal border border-border bg-container/29 focus:outline-none focus:ring-2 focus:ring-black text-xs!"
          />
        </div>
        <ComboBox
          className="relative mt-9.5"
          title={tMenu("MenuFilterDrawer.SelectDelivery.Label")}
          options={serviceOptions}
          selectedId={tempDeliveryId}
          onSelectionChange={handleDeliveryChange}
        />
        <div className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer focus:outline-none focus:ring-2 focus:ring-black">
          <span className="inline-flex items-center gap-2.5 text-sm2">
            <TicketPercentIcon size={16} />
            {tMenu("MenuFilterDrawer.DiscountState")}
          </span>
          <Switch />
        </div>
      </div>
      <hr className="text-white/40 mt-12" />
      <div className="px-9 pt-6 flex justify-between gap-[22px]">
        <div className="w-full">
          <Button className="dark:bg-white! dark:text-black!" onClick={handleApply}>{tMenu("MenuFilterDrawer.ButtonOk")}</Button>
        </div>
        <div className="w-full">
          <Button className="bg-disabled! text-disabled-text!" onClick={handleCancel}>
            {tMenu("MenuFilterDrawer.ButtonCancel")}
          </Button>
        </div>
      </div>
    </AnimatedBottomSheet>
  );
};

export default MenuFilterDrawer;
