import { Divider } from "antd";
import { Dispatch, SetStateAction } from "react";

import { TheExtrasGroup } from "utils/types/appTypes";

import ExtrasGroup from "pages/product/components/ExtrasGroup.tsx";

export default function ExtraGroupsContainer({
  groupsList,
  selectedExtrasByGroup,
  setSelectedExtrasByGroup,
}: {
  groupsList: TheExtrasGroup[];
  selectedExtrasByGroup: Record<number, string[]>;
  setSelectedExtrasByGroup: Dispatch<SetStateAction<Record<number, string[]>>>;
}) {

  return (
    <>
      {groupsList.length > 0 && (
        <div>
          <Divider style={{ margin: "0 0 16px 0" }} />

          {/* <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              margin: "0 0 16px 0",
            }}
          >
            <ProText style={{ fontSize: "1.25rem" }}>
              {t("menu.youMightAlsoLike")}
            </ProText>

            <ProText strong style={{ fontSize: "0.75rem" }}>
              {t("menu.optional")}
            </ProText>
          </div> */}

          {/* <ProText strong style={{ fontSize: "0.75rem" }}>
                        {t("menu.choose1")}
                      </ProText> */}
        </div>
      )}

      {groupsList?.map((group: TheExtrasGroup) => (
        <ExtrasGroup
          group={group}
          selectedExtras={selectedExtrasByGroup[group.id]}
          onChange={(values) => {
            setSelectedExtrasByGroup({
              ...selectedExtrasByGroup,
              [group.id]:
                group.extras
                  .filter((o) => values?.includes(o.id.toString()))
                  .map((e) => e.id.toString()) || [],
            });
          }}
        />
      ))}
    </>
  );
}