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?.provision

    useEffect(()=>{
        joinRoom(productSubUID); // 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">
                                <p>
                                    {productDescription}
                                </p>
                                </div>
                            </div>

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