import React, {useEffect, 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";
import {SocketContextValues} from "../context/SocketIOContext";


export default function ProductActive({productData}){
    const {joinRoom} = SocketContextValues() // Destructures values from socket context
    const iframe = useRef()

    const [refreshMsg, setRefreshMsg] = useState('')

    const refresh = useMutation({
        mutationFn: (fields) => {
            return productRefreshSite(fields)
        },
        onSuccess: (res) => {
            setRefreshMsg(res?.data?.message)
            setTimeout(()=>{setRefreshMsg('')},3000)
            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

    const productSubUID = productData.subscription_uid;
    useEffect(() => {
        const provision_room  = "PROVISION_"+productSubUID;
        console.log("JOINING ROOM ON ACTIVE *** ", provision_room);
        joinRoom(provision_room); // provision subscription room
    }, [])

    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>*/}
                                        <h4  style={{color: '#148399', fontWeight: 'bolder'}}>
                                            <a  href={externalUrl} target='_blank'>{externalUrl}</a></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" style={{minHeight: '680px'}}>
                                    <iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
                                </div>
                                <div className="p-4 ml-auto">
                                    <div className="d-flex justify-end gap-3">
                                        {refreshMsg &&
                                            <p className="text-success text-center">{refreshMsg}</p>
                                        }
                                        <button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Initiating...' : 'Rebuild Site'}
                                        </button>
                                    </div>
                                </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" style={{minHeight: '680px'}}>
                                    <Settings productData={productData} />
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            </div>
        </>
    )
}