import {useEffect} from "react";
import {useQuery} from "@tanstack/react-query";
import queryKeys from "../../services/queryKeys";
import {productProvision} from "../../services/services";
import getImage from "../../utils/getImage";
import {SocketContextValues} from "../context/SocketIOContext";


export default function ProductProvision(props) {
    const {joinRoom} = SocketContextValues() // Destructures values from socket context

    const productTitle = props?.productData?.title;
    const productDescription = props?.productData?.description;
    const productID = props?.productData?.product_id
    const productUID = props?.productData?.product_uid
    const productSubUID = props?.productData?.product_subscription_uid

    const reqData = {
        product_id: productID,
        product_subscription_uid: productSubUID
    }

    const {data: provision, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.myproduct_provision,
        queryFn: () => productProvision(reqData)
    })

    const provisionData = provision?.data

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

    return (
        <>
            {isFetching ?
                <>
                    <div className="row">
                        <div className="col-12">
                            <p className='text-mute'>Loading...</p>
                        </div>
                    </div>
                </>
                : isError ?
                    <div className="row">
                        <div className="col-12">
                            <p className='text-danger'>{error.message}</p>
                        </div>
                    </div>
                    :
                    <>
                        <div className="row">
                            <div className="col-md-12">
                                <div className="card card-statistics">
                                    <div className="card-header">
                                        <div className="card-heading">
                                            <h4 className="card-title">Creating - {productTitle} </h4>
                                        </div>
                                    </div>
                                    <div className="card-body">
                                        <div className="progress">
                                            <div className="progress-bar progress-bar-striped progress-bar-animated"
                                                 role="progressbar"
                                                 aria-valuenow={`${provisionData?.percent_completed}%`}
                                                 aria-valuemin="0" aria-valuemax="100"
                                                 style={{width: `${provisionData?.percent_completed}%`}}></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-md-12">


                            </div>
                        </div>
                        <div className="row">
                            <div className="col-lg-6">

                                <div className="card card-statistics">
                                    <div className="card-header">
                                        <div className="card-heading">
                                            <h4 className="card-title">Progress Information</h4>
                                        </div>
                                    </div>
                                    <div className="card-body">
                                        <div className="table-responsive">
                                            <table className="table table-info mb-0">
                                                <thead>
                                                <tr>
                                                    <th scope="col" style={{width: '10px'}}>#</th>
                                                    <th scope="col">Action</th>

                                                </tr>
                                                </thead>
                                                <tbody>
                                                {provisionData?.activities?.map(item => (
                                                    <tr key={item.id}>
                                                        <th scope="row">{item.id}</th>
                                                        <td>{item.action}</td>

                                                    </tr>
                                                ))}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="col-lg-6">
                                <div className="card card-statistics ">
                                    <h4 className="card-title" style={{padding: '10px'}}>Started creating your
                                        selection</h4>
                                    <img className="card-img-top" src={getImage('widget/working.jpg')}
                                         alt="Card image cap"/>
                                    {/* <div className="card-body">
                                    <div className="" dangerouslySetInnerHTML={{__html: productDescription}}/>
                                </div> */}
                                </div>

                            </div>
                        </div>
                    </>
            }
        </>
    )
}