import React, { useState } from "react";
import cls from "./extrasForm.module.scss";
import { Addon } from "interfaces";
import { useTranslation } from "react-i18next";
import useDidUpdate from "hooks/useDidUpdate";
import AddonsItem from "./addonsItem";

type Props = {
  data: Addon[];
  handleAddonClick: (e: any) => void;
  quantity: number;
};

type SelectedItem = {
  id: string;
  quantity: number;
};

export default function AddonsForm({
  data = [],
  handleAddonClick,
  quantity,
}: Props) {
  const { t } = useTranslation();
  const [selectedValues, setSelectedValues] = useState<SelectedItem[]>([]);

  const handleChange = (item: Addon, count?: number) => {
    const value = String(item.id);
    if (!count) {
      setSelectedValues((prev) => prev.filter((el) => el.id !== value));
    } else {
      const newValues = [...selectedValues];
      const idx = newValues.findIndex((el) => el.id == value);
      if (idx < 0) {
        newValues.push({
          id: value,
          quantity: count,
        });
      } else {
        newValues[idx].quantity = count;
      }
      setSelectedValues(newValues);
    }
  };

  useDidUpdate(() => {
    let addons: any[] = [];

    selectedValues.forEach((item) => {
      const element = data.find((el) => String(el.id) == item.id);
      if (!element) {
        addons = [];
        return;
      }
      const addon = {
        ...element.product,
        stock: { ...element.product?.stock, quantity: item.quantity },
      };
      addons.push(addon);
    });

    handleAddonClick(addons);
  }, [selectedValues]);

  return (
    <div
      className={cls.extrasWrapper}
      style={{ display: data.length > 0 ? "block" : "none" }}
    >
      <h3 className={cls.extraTitle}>{t("ingredients")}</h3>
      <div className={cls.extraGroup}>
        {data
          .filter((item) => !!item.product)
          .map((item) => (
            <AddonsItem
              key={item.id + "addon" + quantity}
              data={item}
              quantity={quantity}
              selectedValues={selectedValues}
              handleChange={handleChange}
            />
          ))}
      </div>
    </div>
  );
}