//React
import React from "react";
import { useNavigate } from "react-router-dom";
import { useEffect, useContext } from "react";
//Helpers
import { AuthContext } from '../helpers/AuthContext';
//Styling
import './styles/Pricing.css'
import Button from '@mui/material/Button';

export default function Pricing() {

    let navigate = useNavigate();
    const { authState } = useContext(AuthContext);

    useEffect(() => {
    }, [authState]);

    return (
        <div className=" container w-100">
            {authState.loggedIn &&
                <>
                    <div className="px-4 py-5 my-5 text-center">
                        <h1 className="display-5 fw-bold">Welcome to the fam, {authState.username}!</h1>
                        <div className="col-lg-6 mx-auto">
                            <p className="lead mb-4">Now that you've joined the club, let's get you set up with a subscription so we can get you on the road! You can explore the subscription options below. When you find the right fit, just go ahead and click subscribe under your prefered tier and we'll get the wheels rolling from there.</p>
                        </div>
                    </div>
                </>
            }
            <section>
                <div className="container p-5 mt-5 mb-5 bg-light rounded-pill shadow-sm w-100">
                    <div >
                        <div className="row justify-content-md-center">
                            <div className="col-md-5 mb-4">
                                <h1 className="mb-5 text-center">MONTHLY <br /> MEMBERSHIP</h1>
                                <p className="mb-3">Rediscover your neighbourhood whenever you’d like! Our monthly membership is perfectly adapted to your needs. Whether you want to experience the HELLO VELO service to the fullest all season-long, cycle during the best months of the year or set yourself a personal bike challenge, it’s just what you need! Take advantage of this offer if you use HELLO VELO approximately twice a week or if you love riding our electric HELLO VELO! This membership goes into effect on the day of your purchase and includes unlimited 45-minute regular HELLO VELO trips as well as a reduced price on electric HELLO VELO rides.</p>
                                <table className="table-responsive w-100">
                                    <caption className="fst-italic">Tier Benefits</caption>
                                    <tbody>
                                        <tr className="pricing-table">
                                            <td>Unlocking fee</td>
                                            <td><strong>$0</strong></td>
                                        </tr>
                                        <tr className="pricing-table">
                                            <td>Regular HELLO VELO – 0 to 45 min</td>
                                            <td><strong>Unlimited</strong></td>
                                        </tr>
                                        <tr className="pricing-table">
                                            <td>Regular HELLO VELO – 45 min +</td>
                                            <td><strong>$3 per 30 minutes</strong></td>
                                        </tr>
                                    </tbody>
                                </table>
                                {!authState.loggedIn && 
                                
                                        <div className='d-flex justify-content-center'>
                                        <Button
                                            variant="contained"
                                            sx={{ mt: 3, mb: 2, bgcolor: "#9ad5e9" }}
                                            className="text-white m-2 align-middle"
                                            onClick={
                                                () => {
                                                    navigate(`/login`)
                                                }
                                            }
                                        >
                                            Login to Subscribe!
                                        </Button>
                                    </div>
                                }
                                {authState.loggedIn && !authState.provisionAccess && !(authState.roles && authState.roles.includes("ADMIN")) &&
                                    <div className='d-flex justify-content-center'>
                                    <Button
                                        className='w-75'
                                        variant="contained"
                                        sx={{ mt: 3, mb: 2, bgcolor: "#EEB2A5" }}
                                        onClick={
                                            () => {
                                                navigate("/registration/stripe")
                                            }
                                        }
                                    >
                                        Subscribe
                                    </Button>
                                </div>
                            }
                                {/* {authState.loggedIn ? (
                                    <div className='d-flex justify-content-center'>
                                        <Button
                                            className='w-75'
                                            variant="contained"
                                            sx={{ mt: 3, mb: 2, bgcolor: "#EEB2A5" }}
                                            onClick={
                                                () => {
                                                    navigate("/registration/stripe")
                                                }
                                            }
                                        >
                                            Subscribe
                                        </Button>
                                    </div>
                                ) : (
                                    <div className='d-flex justify-content-center'>
                                        <Button
                                            variant="contained"
                                            sx={{ mt: 3, mb: 2, bgcolor: "#9ad5e9" }}
                                            className="text-white m-2 align-middle"
                                            onClick={
                                                () => {
                                                    navigate(`/login`)
                                                }
                                            }
                                        >
                                            Login to Subscribe!
                                        </Button>
                                    </div>
                                )} */}
                            </div>
                            <div className="col-sm-6 col-md-5 col-md-offset-1 col-lg-offset-2 col-lg-4">
                                <div className="price-info-box py-5 px-5 mb-4 rounded-3 shadow">
                                    <h2><span lang="EN-CA" data-contrast="auto"><span>$18</span></span></h2>
                                    <h3 ><span lang="EN-CA" data-contrast="auto"><span >30 days</span></span></h3>
                                    <p>Take advantage of all member benefits.&nbsp;Membership available on April 11.</p>
                                </div>
                                <div className="pricing-block"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    )
}