import ArrowDropDownOutlinedIcon from "@mui/icons-material/ArrowDropDownOutlined";
import React, { useEffect, useState } from "react";

import AddBoxIcon from "@mui/icons-material/AddBox";
import IndeterminateCheckBoxIcon from "@mui/icons-material/IndeterminateCheckBox";
import { Checkbox, IconButton, TextField } from "@mui/material";
import BuzzMenu from "../../../Menu/BuzzMenu";
import { getFormattedCurrency } from "../../../utils";
import style from "./ProductCard.module.css";

function ProductCard({
  currency,
  data,
  removeFromCart,
  changeBuyOnlyLicenseFlag,
  changeLicenseCount,
  changeTerm,
}) {
  const [licenseCount, setLicenseCount] = useState(
    (data.additionalLicenses &&
      data.additionalLicenses.length > 0 &&
      data.additionalLicenses[0].count) ||
      0
  );

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      changeLicenseCount(data._id, licenseCount);
    }, 500);

    return () => clearTimeout(timeoutId);
  }, [licenseCount]);

  return (
    <div className={style.container}>
      <div className={style.row1}>
        <div className={style.img}></div>
        <div className={style.content_box}>
          <div className={style.group1}>
            <div className={style.name_box}>
              <p>
                {data.plan.name}{" "}
                {data.plan.name.split(" ")[0] === "Toddlers"
                  ? null
                  : data.class && `for ${data.class.name}`}
              </p>
              <div className={style.duration}>
                <div>
                  <p>Duration :&nbsp;</p>
                  {/* <p> {data.plan.variants[data.planVariantIdx].termInMonths} months </p> */}

                  <BuzzMenu
                    text={`${
                      data.plan.variants[data.planVariantIdx].termInMonths
                    } months`}
                    menuList={data.plan.variants
                      .filter(({ priceDetails }) =>
                        priceDetails.find(
                          (priceDetail) => priceDetail.currency === currency
                        )
                      )
                      .map(({ termInMonths }, idx) => {
                        return { id: idx, text: `${termInMonths} months` };
                      })}
                    onChange={(idx) => changeTerm(data._id, idx)}
                    arrowIcon={<ArrowDropDownOutlinedIcon />}
                  />
                </div>
              </div>
            </div>
          </div>
          <div className={style.price_box}>
            <p>{getFormattedCurrency(currency, data.subscriptionCost)}</p>
            <p>
              {getFormattedCurrency(
                currency,
                data.subscriptionCost /
                  data.plan.variants[data.planVariantIdx].termInMonths
              )}{" "}
              / month
            </p>
            <p onClick={() => removeFromCart(data._id)}>Remove</p>
          </div>
        </div>
      </div>
      {data.additionalLicenses && (
        <div className={style.row2}>
          <div className={style.img} style={{ height: "auto" }}></div>

          <div
            className={style.content_box}
            style={{
              padding: "0px",
              opacity: "0.8",
            }}
          >
            <div
              className={style.name_box}
              style={{
                flexDirection: "row",
                alignItems: "center",
              }}
            >
              <Checkbox
                checked={data.buyingOnlyLicenses}
                onChange={(event) =>
                  changeBuyOnlyLicenseFlag(data._id, event.target.checked)
                }
                inputProps={{ "aria-label": "controlled" }}
                sx={{ pl: 0 }}
              />
              <p style={{ fontSize: "1rem" }}>
                Are you buying EXTRA licenses ?{" "}
                {`(applicable only for existing subscriptions)`}
              </p>
            </div>
          </div>
        </div>
      )}
      {data.additionalLicenses &&
        data.additionalLicenses.map(({ licenseQuotaType, count, price }) => (
          <div className={style.row2}>
            <div className={style.img}></div>

            <div className={style.content_box}>
              <div className={style.group1}>
                <div className={style.name_box}>
                  <p>Member Access</p>
                </div>

                <div className={style.license_box}>
                  <IconButton
                    aria-label="add-license"
                    size="small"
                    onClick={() => setLicenseCount((x) => x - 1)}
                    disabled={licenseCount <= 0}
                  >
                    <IndeterminateCheckBoxIcon
                      sx={{ fontSize: "2rem", opacity: 0.5 }}
                      color="primary"
                    />
                  </IconButton>
                  {/* <p>{count}</p> */}
                  <TextField
                    value={licenseCount}
                    type="number"
                    onChange={(e) => setLicenseCount(parseInt(e.target.value))}
                  />
                  <p> Licenses</p>
                  <IconButton
                    aria-label="add-license"
                    size="small"
                    onClick={() => setLicenseCount((x) => x + 1)}
                  >
                    {/* <RemoveCircleOutlineOutlinedIcon /> */}
                    <AddBoxIcon sx={{ fontSize: "2rem" }} color="primary" />
                  </IconButton>
                </div>
              </div>
              <div className={style.price_box}>
                <p>{getFormattedCurrency(currency, price)}</p>
                <p>
                  {count} x{" "}
                  {getFormattedCurrency(
                    currency,
                    price /
                      (data.plan.variants[data.planVariantIdx].termInMonths *
                        count)
                  )}{" "}
                  / month
                </p>
              </div>
            </div>
          </div>
        ))}
    </div>
  );
}

export default ProductCard;
