import React, { useState } from 'react'
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage";
import { getSubscriptions } from '../../services/services';
import { useQuery } from '@tanstack/react-query';
import queryKeys from '../../services/queryKeys';
import siteLinks from "../../links/siteLinks";
import { Link, useLocation } from 'react-router-dom'
import SubscribeNewCard from "./SubscribeNewCard";
import SubscribePreviousCard from "./SubscribePreviousCard";
import SubcribePaymentOptions from "./SubcribePaymentOptions";

export default function Subscribe() {

    const {state:{selectedSubscription}} = useLocation()

    // console.log('selectedSubscription', selectedSubscription)
    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 />
                                    }

                            </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>
                                <ul className="py-2">
                                    {selectedSubscription?.items?.map(item =>(
                                        <li key={item}>{item}</li>
                                    ))}
                                </ul>
                                {/*<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>
        </>
    )
}