import DoneIcon from "@mui/icons-material/Done";
import { Box, Button, Tooltip } from "@mui/material";
import React, { useState } from "react";
import BuzzMenu from "../../../Menu/BuzzMenu";
import { getFormattedCurrencyWithoutDecimals } from "../../../utils";
import style from "./PlatformCard.module.css";
import CircleIcon from "@mui/icons-material/Circle";
import { store } from "../../../redux/store";
import { Provider } from "react-redux";
function PlatformCard({
  props: {
    currency,
    planId,
    title,
    description1,
    description2,
    imageUrl,
    featureList,
    priceList = [],
    isComingSoon = false,
  },
  handleAddToCart,
}) {
  const [priceIdx, setPriceIdx] = useState(0);

  const addToCartHandler = () => {
    const payload = { planId };
    payload.priceIdx = priceIdx;

    handleAddToCart(payload);
  };

  return (
    <Provider store={store}>
    <div className={style.container}>
      {imageUrl && <img src={imageUrl} alt={`${title} card image`} />}
      <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[priceIdx].amount
              )}
            </p>

            <p> {priceList[priceIdx].text}</p>
          </>
        )}
        {priceList.length > 1 && (
          <>
            <p>
              {" "}
              {getFormattedCurrencyWithoutDecimals(
                currency,
                priceList[priceIdx].amount
              )}
            </p>

            <p>
              <BuzzMenu
                text={priceList[priceIdx].text}
                menuList={priceList}
                onChange={(idx) => {
                  setPriceIdx(idx);
                }}
              />
            </p>
          </>
        )}
      </div>
      <div className={style.button_container}>
        <Tooltip title={isComingSoon ? "Coming Soon" : "Add to Cart"}>
          <span style={{ width: "100%" }}>
            <Button
              variant="contained"
              fullWidth
              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>
    </Provider>
  );
}

export default PlatformCard;
