import React, { useMemo } from "react";
import PropTypes from "prop-types";
import {
  BuyButton,
  Line,
  PlanContainer,
  PlanDetail,
  PlanDetailDescription,
  PlanDetailTitle,
  PlanIcon,
  PlanPrice,
  PlanPriceContainer,
  PlanPriceMonthly,
  PlanTitle,
  PlanTitleDescription,
} from "./Plan.styled";
import selectedTheme from "../../../themes";
import { useTranslation } from "react-i18next";

const Plan = (props) => {
  const { t } = useTranslation();
  const i18String = useMemo(() => {
    return `plan.${props.typeOfPlan}.`;
  }, [props.typeOfPlan]);
  return (
    <PlanContainer highlighted={props.highlighted}>
      <PlanTitle highlighted={props.highlighted}>
        {t(`${i18String}title`)}
      </PlanTitle>

      <PlanTitleDescription highlighted={props.highlighted}>
        {t(`${i18String}description`)}
      </PlanTitleDescription>

      <PlanPriceContainer highlighted={props.highlighted}>
        <PlanPrice highlighted={props.highlighted}> {props.price}</PlanPrice>
        <PlanPriceMonthly highlighted={props.highlighted}>
          {t("plan.monthly")}
        </PlanPriceMonthly>
      </PlanPriceContainer>

      {/* Below are details about plan */}
      <PlanDetail highlighted={props.highlighted}>
        <PlanDetailTitle highlighted={props.highlighted}>
          {t(`${i18String}firstQuantity`)}
        </PlanDetailTitle>
        <PlanDetailDescription highlighted={props.highlighted}>
          {t(`${i18String}firstDetail`)}
        </PlanDetailDescription>
      </PlanDetail>
      <Line />
      <PlanDetail highlighted={props.highlighted}>
        <PlanDetailTitle highlighted={props.highlighted}>
          {t(`${i18String}secondQuantity`)}
        </PlanDetailTitle>
        <PlanDetailDescription highlighted={props.highlighted}>
          {t(`${i18String}secondDetail`)}
        </PlanDetailDescription>
      </PlanDetail>
      <Line />
      <PlanDetail highlighted={props.highlighted}>
        <PlanDetailTitle highlighted={props.highlighted}>
          {t(`${i18String}thirdQuantity`)}
        </PlanDetailTitle>
        <PlanDetailDescription highlighted={props.highlighted}>
          {t(`${i18String}thirdDetail`)}
        </PlanDetailDescription>
      </PlanDetail>
      <Line />
      <PlanDetail highlighted={props.highlighted}>
        <PlanDetailTitle highlighted={props.highlighted}>
          {t(`${i18String}forthQuantity`)}
        </PlanDetailTitle>
        <PlanDetailDescription highlighted={props.highlighted}>
          {t(`${i18String}forthDetail`)}
        </PlanDetailDescription>
      </PlanDetail>
      <Line />
      <PlanDetail highlighted={props.highlighted}>
        <PlanDetailDescription highlighted={props.highlighted}>
          {t(`${i18String}fifthDetail`)}
        </PlanDetailDescription>
      </PlanDetail>
      {/* ^^^^^^^^^^ */}

      <BuyButton
        highlighted={props.highlighted}
        variant="contained"
        width="180px"
        height="48px"
        buttoncolor={
          props.highlighted
            ? selectedTheme.colors.primaryYellow
            : selectedTheme.colors.primaryPurple
        }
        textcolor={
          props.highlighted ? selectedTheme.colors.selectOptionTextColor : "white"
        }
      >
        {t("plan.buy")}
      </BuyButton>

      <PlanIcon highlighted={props.highlighted}>
        {props.planIcon}
      </PlanIcon>
    </PlanContainer>
  );
};

Plan.propTypes = {
  children: PropTypes.node,
  highlighted: PropTypes.bool,
  typeOfPlan: PropTypes.string,
  price: PropTypes.string,
  planIcon: PropTypes.node,
};

export default Plan;
