import React, { useEffect } from "react";
import Navbar from "../../components/Navbar";
import Footer from "../Home/Footer";
import SubscribeRadio from "./SubscribeRadio";
import DiscountCode from "./DiscountCode";
import { connect } from "react-redux";
import { product, userFactor } from "../../redux/actions";
import scroll from "../../util/scroll";
import Loader from "../../components/Loader";
import _ from "lodash";

function Subscription({
  listVOD,
  getList,
  loading,
  selectedVOD,
  payment,
  verify,
  theme,
}: any) {
  useEffect(() => {
    getList();
    scroll.goToTop();
  }, []);
  const light = theme === "light";
  return (
    <div
      className={_.join(
        [
          "subscription main d-flex flex-column",
          light ? 'subscription-light bg-white' : 'subscription-dark bg-black'
        ],
        " "
      )}
    >
      <Navbar />
      <main className={"d-flex flex-column" + " " + (loading && "blur")}>
        <h1>خرید اشتراک دانوین</h1>
        <p>
          اینجا هم برای هر کتاب امکان خرید اشتراک جداگانه هست و هم اشتراک های
          مدت دار. با خرید اشتراک های مدت دار دانوین می تونید در هزینه هاتون
          صرفه جویی کنید.
        </p>
        {listVOD?.map((subscribe: any, i: any) => (
          <SubscribeRadio theme={theme} data={subscribe} key={i} />
        ))}
        <DiscountCode />
        <div className="d-flex justify-content-end py-4">
          <button
            className="submit submit-large"
            onClick={() => payment({ productId: selectedVOD.id })}
          >
            تایید و پرداخت
          </button>
        </div>
      </main>
      <Footer />
      {loading ? (
        <div className="full-loader">
          <Loader size={50} />
        </div>
      ) : null}
    </div>
  );
}

export default connect(
  (state: any) => ({
    listVOD: state.product.listVOD,
    loading: state.product.loading,
    selectedVOD: state.product.selectedVOD,
    theme: state.publicApi.theme,
  }),
  {
    getList: product.listVOD,
    payment: userFactor.payment,
    verify: userFactor.verify,
  }
)(Subscription);
