import React 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, useNavigate} from 'react-router-dom'
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';

export default function Subscription() {
    const navigate = useNavigate()
    const pricingFields = {
        starter: {name: 'Starter', price: 5.99, active: true},
        basic: {name: 'Basic', price: 12.99, active: true},
        premium: {name: 'Premium', price: 20.00, active: true},
    }

    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.subscriptions,
        queryFn: () => {
            let reqData = {
                token: localStorage.getItem('token'), // USER TOKEN
                uid: localStorage.getItem('uid') // USER UID
            }
            return getSubscriptions(reqData)
        }
    })

    const currentSubscription = data?.data?.current_product
    const otherSubscriptions = data?.data?.options
    const stripe_customer_id = data?.data.stripe_customer_id

    // console.log('urlData', data?.data)

    return (
        <>
            <BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']}/>

            {isFetching ?
                <>
                    <div className="col-12">
                        <p className='text-mute'>Loading...</p>
                    </div>
                </>
                : isError ?
                    <div className="col-12">
                        <p className='text-danger'>{error.message}</p>
                    </div>
                    :
                    <div className="row">
                        <div className="col-12 col-lg-6 col-xl-3">
                            <div className="card card-statistics text-center py-3" style={{backgroundColor: '#e6f5f4'}}>
                                <div className="card-body pricing-content">
                                    <div className="pricing-content-card" style={{minHeight: '350px'}}>
                                        <h5>Your Subscription(s)</h5>
                                        <h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
                                    </div>
                                    <div className="pt-2" style={{textAlign: 'left'}}>
                                        <div style={{fontSize: '12px', fontWeight: 'bolder' , color: "#3E3699"  }}>
                                            Next Payment: {getDateTimeFromDateString(currentSubscription?.next_payment)}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <>
                            {Object.entries(otherSubscriptions)?.map(([key, value]) => (

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

                                            </div>
                                        </div>
                                        <div className="pt-2" style={{fontWeight: 'bolder'}}>
                                            {
                                                (currentSubscription?.display_name == value.option_name) ? 'Current Subscription' :
                                                    <button onClick={() => {
                                                        navigate(siteLinks.subscribe, {
                                                            state: {
                                                                selectedSubscription: value,
                                                                customerId: stripe_customer_id
                                                            }
                                                        })
                                                    }}
                                                            className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
                                            }
                                        </div>
                                    </div>
                                </div>

                            ))}
                        </>

                    </div>
            }
        </>
    )
}