import React, { useMemo, useRef, useState } from "react";
import { useSelector } from "react-redux";
import getImage from "../../utils/getImage";
import { useMutation, useQuery } from "@tanstack/react-query";
import { productRefreshSite, getSettingsData } from "../../services/services";
import Settings from "./settingsTab/Settings";
import queryKeys from "../../services/queryKeys";


export default function ProductActive({productData}){

    const iframe = useRef()

    const refresh = useMutation({
        mutationFn: (fields) => {
            return productRefreshSite(fields)
        },
        onSuccess: (res) => {
            iframe.current.src += ''
        }
    })

    const handleRefresh = () => {
        const reqData = {
            token: localStorage.getItem('token'), // USER TOKEN
            uid: localStorage.getItem('uid'), // USER UID
            product_id: productData.product_id,
            subscription_uid: productData.subscription_uid
        }
        refresh.mutate(reqData)
    }
    let externalUrl= 'https://'+productData?.internal_url

    return(
        <>
            {/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
            {/*<div className="row">*/}
            {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
            {/*</div>*/}


            <div className="row account-contant">
                <>
                    <div className="row tabs-contant">
                        <div className="col-xxl-6">
                            <div className="card card-statistics">
                                <div className="card-header">
                                    <div className="card-heading d-flex justify-content-between">
                                        <h4 className="card-title">{externalUrl}</h4>
                                        <button type="button" onClick={()=>iframe.current.src += ''} className="btn">
                                            <img src={getImage('refresh.png')} style={{width: '30px', height: 'auto'}} alt='refresh page' />
                                        </button>
                                    </div>
                                </div>
                                <div className="card-body">
                                    <iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
                                </div>
                                <div className="p-4 ml-auto">
                                    <button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div className="col-xxl-6">
                            <div className="card card-statistics">
                                <div className="card-header">
                                    <div className="card-heading">
                                        <h4 className="card-title"> Site Settings </h4>
                                    </div>
                                </div>
                                <div className="card-body">
                                    <Settings productData={productData} />
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            </div>
        </>
    )
}