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

function ProductCardHorizontal({
  props: {
    currency,
    planId,
    title,
    description1,
    description2,
    imageUrl,
    featureList,
    priceList = [],
    classList = [],
  },
  handleAddToCart,
}) {
  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);
  };

  return (
    <div className={style.container}>
      <div>
        <p className={style.title}>{title}</p>
        <p className={style.description1}>{description1}</p>
        <p className={style.description2}>{description2}</p>
        <div className={style.price}>
          {priceList.length === 1 && (
            <>
              <p>
                {" "}
                {getFormattedCurrencyWithoutDecimals(
                  currency,
                  priceList[0].amount
                )}
              </p>
              <p> {priceList[0].text}</p>
            </>
          )}
          {priceList.length > 1 && (
            <>
              <p>
                {" "}
                {getFormattedCurrencyWithoutDecimals(
                  currency,
                  priceList[0].amount
                )}
              </p>
              <p>
                <BuzzMenu
                  text={priceList[priceIdx].text}
                  menuList={priceList}
                  onChange={(idx) => {
                    setPriceIdx(idx);
                  }}
                />
              </p>
            </>
          )}
        </div>
        {priceList[priceIdx].text2 && (
          <div className={style.price}>
            <div className={style.text2}>{priceList[priceIdx].text2}</div>
          </div>
        )}

        <div className={style.button_container}>
          <button
            style={{ background: "#012E6C", width: "100%" }}
            onClick={addToCartHandler}
          >
            Add to Cart
          </button>
          {classList.length > 0 && (
            <p>
              <BuzzMenu
                text={classList[classIdx].text}
                menuList={classList}
                onChange={(idx) => {
                  setClassIdx(idx);
                }}
              />
            </p>
          )}
        </div>

        <div className={style.feature_list}>
          <ul>
            {featureList.map((listItem) => (
              <>
                <li>
                  <DoneIcon sx={{ fontSize: "0.9rem" }} /> &nbsp;{" "}
                  {listItem.feature}
                </li>
                {listItem?.subfeature?.map((item) => (
                  <li style={{ marginLeft: "16px" }}>
                    <CircleIcon sx={{ fontSize: "0.6rem" }} /> &nbsp;
                    {item}
                  </li>
                ))}
              </>
            ))}
          </ul>
        </div>
      </div>
      <div>
        {imageUrl && (
          <img
            src={imageUrl}
            alt={`Empower Your Preschool with aKadmy | Flexible, Affordable Pricing`}
            width={"100%"}
          />
        )}
      </div>
    </div>
  );
}

export default ProductCardHorizontal;
