import React, {useState} from 'react'
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import {Link, useLocation} from 'react-router-dom'
import SubscribeNewCard from "./SubscribeNewCard";
import SubscribePreviousCard from "./SubscribePreviousCard";
import SubcribePaymentOptions from "./SubcribePaymentOptions";
import StripeSubscriptionButton from "./StripeSubscriptionButton";




export default function Subscribe() {
    const {state: {selectedSubscription,customerId}} = useLocation()

    console.log('selectedSubscription', selectedSubscription)
    console.log('selectedSubscription.option_name',selectedSubscription.option_name)
    console.log('customerId', customerId)

    let [activePaymentType, setActivePaymentType] = useState('previous')

    return (
        <>
            <BreadcrumbComBS title='Activate or Update your Subscription' paths={['Dashboard', 'subscribe']}/>

            <div className="row">
                <div className="col-12 col-lg-6 col-xl-6">
                    <div className="card card-statistics text-center py-3">
                        <div className="card-body pricing-content">
                            <div className="pricing-content-card">
                                <h5>Current Subscription(s)</h5>
                                {/*<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>*/}
                                <SubcribePaymentOptions activePaymentType={activePaymentType}
                                                        setActivePaymentType={setActivePaymentType}/>
                                {activePaymentType == 'new' ?
                                    <SubscribeNewCard/>
                                    :
                                    <SubscribePreviousCard/>
                                }
                                <>
                                    <StripeSubscriptionButton priceId={selectedSubscription.stripe_price_id} customerId={customerId} option_name={selectedSubscription.option_name} />
                                </>
                            </div>
                        </div>
                    </div>
                </div>

                <>
                    <div key="basic" className="col-12 col-lg-6 col-xl-6">
                        <div className="card card-statistics text-center py-3">
                            <div className="card-body pricing-content">
                                <div className="pricing-content-card">
                                    <h5>{selectedSubscription.display_name}</h5>
                                    <h2 className="text-primary pt-3">${selectedSubscription.monthly}</h2>
                                    <p className="text-primary pb-3">/ Monthly</p>
                                    <ol className="py-2"
                                        style={{fontSize: '16px', fontWeight: 'bold', textAlign: 'left'}}>
                                        {selectedSubscription?.items?.map(item => (
                                            <li key={item.description}>{item.description}</li>
                                        ))}
                                    </ol>
                                    {/*<div className="pt-2">*/}
                                    {/*    <button   className="btn btn-inverse-secondary btn-round btn-sm">Go {subscriptionSelection.display_name}</button>*/}
                                    {/*</div>*/}
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            </div>
        </>
    )
}