import DoneIcon from "@mui/icons-material/Done";
import { Box, Button, Tooltip } from "@mui/material";
import React, { useState } from "react";
import BuzzMenu from "../../../../components/Menu/BuzzMenu";
import { getFormattedCurrencyWithoutDecimals } from "../../../utils";
import style from "./ProductCard.module.css";
import CircleIcon from "@mui/icons-material/Circle";

function ProductCard({ props: { currency, planId, title, description1, description2, imageUrl, featureList, priceList = [], classList = [], isComingSoon = false }, handleAddToCart, classDisabled }) {
  const [priceIdx, setPriceIdx] = useState(0);
  const [classIdx, setClassIdx] = useState(0);

  const addToCartHandler = () => {
    const payload = { planId };
    payload.priceIdx = priceIdx;
    if (classList.length > 0) payload.classIdx = classIdx;

    handleAddToCart(payload);
  };

  const classModule =
    title === "InteraKto Coding"
      ? classList.filter((item) => item.text === "IK2" || item.text === "IK3")
      : classList;

  return (
    <div className={style.container}>
      <div className={style.image}>
        {imageUrl && (
          <img
            src={imageUrl}
            alt={`Empower Your Preschool with aKadmy | Flexible, Affordable Pricing`}
            width={"100%"}
          />
        )}
      </div>
      <p className={style.title}>{title}</p>
      <p className={style.description1}>{description1}</p>
      <p className={style.description2}>{description2}</p>
      <div className={style.price}>
        <p>
          {getFormattedCurrencyWithoutDecimals(
            currency,
            priceList[priceIdx].amount
          )}
        </p>

        {priceList.length === 1 ? (
          <p> {priceList[priceIdx].text}</p>
        ) : (
          <p>
            <BuzzMenu
              text={priceList[priceIdx].text}
              menuList={priceList}
              onChange={(idx) => {
                setPriceIdx(idx);
              }}
            />
          </p>
        )}

        {classList.length > 0 && (
          <p>
            {classDisabled ? null : (
              <BuzzMenu
                text={classModule?.[classIdx].text}
                menuList={classModule}
                onChange={(idx) => {
                  setClassIdx(idx);
                }}
              />
            )}
          </p>
        )}
      </div>
      {priceList[priceIdx].text2 && (
        <div className={style.price}>
          <div className={style.text2}>{priceList[priceIdx].text2}</div>
        </div>
      )}

      <div className={style.button_container}>
        <Tooltip title={isComingSoon ? "Coming Soon" : "Add to Cart"}>
          <span style={{ width: "100%" }}>
            {" "}
            <button
              style={{ background: "#012E6C", width: "100%" }}
              onClick={addToCartHandler}
              disabled={isComingSoon}
            >
              Add to Cart
            </button>
          </span>
        </Tooltip>
      </div>

      <div className={style.feature_list}>
        <ul>
          {featureList.map((listItem) => (
            <>
              <li>
                <DoneIcon sx={{ fontSize: "0.9rem" }} /> &nbsp;{" "}
                {listItem.feature}
              </li>
              {listItem?.subfeature?.map((item) => (
                <Box sx={{ ml: 2, display: "flex" }}>
                  <CircleIcon sx={{ fontSize: "0.6rem", mt: 0.8 }} /> &nbsp;
                  <li>{item}</li>
                </Box>
              ))}
            </>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default ProductCard;
