import React, { useEffect, useState } from "react";
import { isAuth } from "../helpers/auth";
import { useNavigate } from "react-router-dom";
import styles from "./Pricing.module.scss";
import ScriptTag from "react-script-tag";
import { loadStripe } from '@stripe/stripe-js';

const PUBLISHABLE_KEY = 'HIDED'

export const Pricing = () => {
  const [buttonValue, setButtonValue] = useState();

  const navigate = useNavigate();

  const handleClick = (e) => {
    setButtonValue(e.target.value);
    checkout();
  };
  const checkout = async() => {
    const stripe = await loadStripe(PUBLISHABLE_KEY);
    console.log(buttonValue);
    fetch("http://localhost:5000/api/checkout", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        buttonValue,
      }),
    })
      .then((result) => result.json())
      .then(({ sessionID }) => stripe.redirectToCheckout({ sessionID }));
  };
  return (
    <div className={styles.container}>
      {isAuth() ? null : navigate("/login")}
      <ScriptTag
        isHydrating={true}
        type="text/javascript"
        src="https://js.stripe.com/v3/"
      />
      <h2 className={styles.heading}>Choose</h2>
      <div className={styles.priceRow}>
        <div className={styles.priceCol}>
          <p>Starter</p>
          <h3>
            50$ <span> / month</span>
          </h3>
          <ul>
            <li>1 Website</li>
            <li>10 GB Disk Space</li>
            <li>Free Email Address</li>
            <li>No SSL certificate</li>
            <li>Limited Support</li>
          </ul>
          <form>
            <button
              value="HIDED"
              type="submit"
              className="btn"
              name="product"
              onClick={(e) => handleClick(e)}
            >
              Upgrade Now
            </button>
          </form>
        </div>
        <div className={styles.priceCol}>
          <p>Advanced</p>
          <h3>
            100$ <span> / month</span>
          </h3>
          <ul>
            <li>1 Website</li>
            <li>10 GB Disk Space</li>
            <li>Free Email Address</li>
            <li>No SSL certificate</li>
            <li>Limited Support</li>
          </ul>
          <form>
            <button
              value="HIDED"
              type="submit"
              className="btn"
              name="product"
              onClick={(e) => handleClick(e)}
            >
              Upgrade Now
            </button>
          </form>
        </div>
        <div className={styles.priceCol}>
          <p>Premium</p>
          <h3>
            200$ <span> / month</span>
          </h3>
          <ul>
            <li>1 Website</li>
            <li>10 GB Disk Space</li>
            <li>Free Email Address</li>
            <li>No SSL certificate</li>
            <li>Limited Support</li>
          </ul>
          <form>
            <button
              value="HIDED"
              type="submit"
              className="btn"
              name="product"
              onClick={(e) => handleClick(e)}
            >
              Upgrade Now
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};