import { Col, Row, Container } from "react-bootstrap";
import "./PricingSection.css";
import React, { useEffect, useState } from "react";
import PricingCard from "../../Components/Pricingcard/Pricingcard";
import Heading from "../../Components/Heading/Heading";
import RangeSlider from "../../Components/Rangeslider/RangeSlider";
import Switche from "../../Components/Switche/Switch";
import DetailedPricelList from "../../Components/DetailedPricelList/DetailedPricelList";
import { useTranslation } from "react-i18next";
import { useInView } from "react-intersection-observer";
import { useAnimation } from "framer-motion";
function PricingSection({ id }) {
  const { inView } = useInView();
  const animation = useAnimation();
  useEffect(() => {
    if (inView) {
      animation.start({
        x: 0,

        transition: {
          type: "just",
          duration: 1,
        },
      });
    }
    if (!inView) {
      animation.start({ x: "100vw" });
    }
  });
  const [isMonthly, setIsMonthly] = useState(true);
  const sendDataToParent = () => {
    // the callback. Use a better name
    if (isMonthly) setIsMonthly(false);
    else setIsMonthly(true);
  };

  function calculatenumOfUsers(numOfUsers) {
    return `users${numOfUsers}`;
  }
  const [numOfUsers, setnumOfUsers] = React.useState(3);

  const handleChange = (event, newnumOfUsers) => {
    if (typeof newnumOfUsers === "number") {
      setnumOfUsers(newnumOfUsers);
    }
  };
  const { t } = useTranslation();
  let priceList = [
    {
      price: <>{isMonthly ? `1440` : `1200`}</>,
      amount: (
        <>
          {isMonthly
            ? `${numOfUsers * 1440}`
            : `${numOfUsers * 1440 + ((numOfUsers * 1200) / 100) * -20}`}
        </>
      ),
      totalAmount: <>{t("pricing.totalamount")}</>,
      plan: <>{t("pricingdetail.plan.basic")}</>,
      currency: (
        <>
          {isMonthly ? (
            <>{t("pricing.currency.monthly")}</>
          ) : (
            <>{t("pricing.currency.yearly")}</>
          )}
          ,
        </>
      ),
      feature1: <>{t("pricing.basic.1")}</>,
      feature2: <>{t("pricing.basic.2")}</>,
      feature3: <>{t("pricing.basic.3")}</>,
      feature4: <>{t("pricing.basic.4")}</>,
      feature5: <>{t("pricing.basic.5")}</>,

      className: "whitecard shadow",
      totalUsers: <>{t("pricing.total user")}</>,
      numOfUsers,
      btntitle: <>{t("pricing.starttrial")}</>,
      title: (
        <>
          <>{t("pricing.currency.monthly")}</>,
        </>
      ),
      BadgeTextColor: "#1F65EE",
      BadgebackgroundColor: "rgb(31 101 238 / 10%)",
      btnbackgroundColor: "#1F65EE",
    },
    {
      price: <>{isMonthly ? `1800` : `1500`}</>,
      amount: (
        <>
          {isMonthly
            ? `${numOfUsers * 1800}`
            : `${numOfUsers * 1800 + ((numOfUsers * 1500) / 100) * -20}`}
        </>
      ),
      totalAmount: <>{t("pricing.totalamount")}</>,
      currency: (
        <>
          {isMonthly ? (
            <>{t("pricing.currency.monthly")}</>
          ) : (
            <>{t("pricing.currency.yearly")}</>
          )}
          ,
        </>
      ),
      plan: <>{t("pricingdetail.plan.pro")}</>,
      feature1: <>{t("pricing.pro.1")}</>,
      feature2: <>{t("pricing.pro.2")}</>,
      feature3: <>{t("pricing.pro.3")}</>,
      feature4: <>{t("pricing.pro.4")}</>,
      feature5: <>{t("pricing.pro.5")}</>,
      feature6: <>{t("pricing.pro.6")}</>,
      totalUsers: <>{t("pricing.total user")}</>,
      className: "whitecard shadow",

      numOfUsers,
      btntitle: <>{t("pricing.starttrial")}</>,
      title: (
        <>
          <>{t("pricing.currency.monthly")}</>,
        </>
      ),
      BadgeTextColor: "#FF68A5",
      BadgebackgroundColor: "rgb(255 104 165 / 10%)",
      btnbackgroundColor: "#FF68A5",
    },
    {
      price: <>{isMonthly ? `2160` : `1800`}</>,
      amount: (
        <>
          {isMonthly
            ? `${numOfUsers * 2160}`
            : `${numOfUsers * 2160 + ((numOfUsers * 1800) / 100) * -20}`}
        </>
      ),
      totalAmount: <>{t("pricing.totalamount")}</>,
      currency: (
        <>
          {isMonthly ? (
            <>{t("pricing.currency.monthly")}</>
          ) : (
            <>{t("pricing.currency.yearly")}</>
          )}
          ,
        </>
      ),
      plan: <>{t("pricingdetail.plan.premium")}</>,
      feature1: <>{t("pricing.premium.1")}</>,
      feature2: <>{t("pricing.premium.2")}</>,
      feature3: <>{t("pricing.premium.3")}</>,
      feature4: <>{t("pricing.premium.4")}</>,
      feature5: <>{t("pricing.premium.5")}</>,
      feature6: <>{t("pricing.premium.6")}</>,

      className: "whitecard shadow",
      totalUsers: <>{t("pricing.total user")}</>,
      numOfUsers,
      btntitle: <>{t("pricing.starttrial")}</>,
      title: (
        <>
          <>{t("pricing.currency.monthly")}</>,
        </>
      ),
      BadgeTextColor: "#1EC997",
      BadgebackgroundColor: "rgb(30 201 151 / 10%)",
      btnbackgroundColor: "#1EC997",
    },
  ];
  return (
    <>
      <section
        className=" mt-5 pt-5 sectionShadow "
        style={{
          paddingBottom: "150px",
        }}
      >
        <Container className=" pt-5 divider">
          <Row className="pt-5  d-flex justify-content-center">
            <Col xl={9} id={id}>
              <Heading
                title={t("pricing.heading")}
                fontFamily="semibold"
                fontSize="32px"
              />
            </Col>

            <Col xl={3}>
              <div className=" styleswitch">
                <Switche
                  title={
                    isMonthly ? (
                      <>{t("pricing.switch.monthly")}</>
                    ) : (
                      <>{t("pricing.switch.yearly")}</>
                    )
                  }
                  sendDataToParent={sendDataToParent}
                  numOfUsers={numOfUsers}
                />
                <p
                  style={{
                    fontFamily: "semibold",
                    color: "#0262F7",
                    position: "absolute",
                  }}
                >
                  {isMonthly ? " " : <>{t("pricing.switch.discount")}</>}
                </p>
              </div>
            </Col>
          </Row>
          <Row className="pt-3 d-flex justify-content-center">
            <Col xl={12}>
              <RangeSlider
                numOfUsers={t("pricing.number of users")}
                calculatenumOfUsers={calculatenumOfUsers}
                handleChange={handleChange}
              />
            </Col>
          </Row>
          <Row className="justify-content-center ">
            {priceList.map((list) => {
              return (
                <>
                  <Col lg={4} md={6} sm={12} xs={12} className="mt-5 ">
                    <PricingCard
                      price={list.price}
                      currency={list.currency}
                      totalAmount={list.totalAmount}
                      amount={list.amount}
                      className={list.className}
                      plan={list.plan}
                      title={list.title}
                      feature1={list.feature1}
                      feature2={list.feature2}
                      feature3={list.feature3}
                      feature4={list.feature4}
                      feature5={list.feature5}
                      feature6={list.feature6}
                      numOfUsers={list.numOfUsers}
                      totalUsers={list.totalUsers}
                      btntitle={list.btntitle}
                      BadgeTextColor={list.BadgeTextColor}
                      BadgebackgroundColor={list.BadgebackgroundColor}
                      btnbackgroundColor={list.btnbackgroundColor}
                    />
                  </Col>
                </>
              );
            })}
          </Row>
          <DetailedPricelList />
        </Container>
      </section>
    </>
  );
}
export default PricingSection;
