import { Divider, message } from "antd";
import ProCheckboxGroups from "components/ProCheckboxGroups/ProCheckboxGroups";
import ProText from "components/ProText";
import { Dispatch, SetStateAction } from "react";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import { Extra4, TheExtrasGroup } from "utils/types/appTypes";
import styles from "../product.module.css";

export default function ExtraGroups({
  groupsList,
  selectedExtrasByGroup,
  setSelectedExtrasByGroup,
}: {
  groupsList: TheExtrasGroup[];
  selectedExtrasByGroup: Record<number, string[]>;
  setSelectedExtrasByGroup: Dispatch<SetStateAction<Record<number, string[]>>>;
}) {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { t } = useTranslation();

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

          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <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) => (
        <div key={group.id}>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <ProText strong style={{ fontSize: "1rem" }}>
              {isRTL ? group.nameAR : group.name}
            </ProText>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "8px",
              }}
            >
              <ProText style={{ fontSize: "0.75rem", color: "#666" }}>
                {group.force_limit_selection === 1 ? "Required" : "Optional"}
              </ProText>
              <ProText style={{ fontSize: "0.75rem", color: "#666" }}>
                ({selectedExtrasByGroup[group.id]?.length || 0}/{group.limit})
              </ProText>
            </div>
          </div>

          {group.force_limit_selection === 1 && (
            <ProText
              style={{
                fontSize: "0.75rem",
                color: "red",
                marginBottom: "8px",
              }}
            >
              * You must select exactly {group.limit} option
              {group.limit > 1 ? "s" : ""}
            </ProText>
          )}

          <div className={styles.productContainer}>
            <ProCheckboxGroups
              options={group.extras.map((extra: Extra4) => ({
                value: extra.id.toString(),
                label: isRTL ? extra.name : extra.nameAR,
                price: `+${extra.price}`,
              }))}
              value={selectedExtrasByGroup[group.id] || []}
              onChange={(values: string[]) => {
                // Check if the new selection would exceed the limit
                if (values.length > group.limit) {
                  message.error(
                    `You can only select up to ${group.limit} option${group.limit > 1 ? "s" : ""} from this group.`
                  );
                  return;
                }
                setSelectedExtrasByGroup((prev) => ({
                  ...prev,
                  [group.id]: values,
                }));
              }}
            />
          </div>
        </div>
      ))}
    </>
  );
}