import React from 'react'
import { productsURL } from '../../services/services'
import { useQuery } from '@tanstack/react-query'
import queryKeys from '../../services/queryKeys'
import getImage from '../../utils/getImage'

export default function ProductsURL() {

    let reqData = {
        token: localStorage.getItem('token'), // USER TOKEN
        uid: localStorage.getItem('uid') // USER UID
    }

    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.product_url,
        queryFn: () => productsURL(reqData)
    })

    const urlData = data?.data?.products_data
    // console.log('data', urlData)

  return (
    <>
        <div className="col-xxl-8 m-b-30">
            <div className="card card-statistics h-100 mb-0">
                <div className="card-header d-flex align-items-center justify-content-between">
                    <div className="card-heading">
                        <h4 className="card-title">My Product URLs</h4>
                    </div>
                    <div className="dropdown">
                        {/*<a className="btn btn-xs" href="#!">Export <i className="zmdi zmdi-download pl-1"></i> </a>*/}
                    </div>
                </div>
                <div className="card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
                    <div className="datatable-wrapper table-responsive">
                    {isFetching ? 
                        <>
                            <div className="col-12">
                                <div className="p-4">
                                    <p className='text-mute'>Loading...</p>
                                </div>
                            </div>
                        </>
                        : isError ?
                        <div className="col-12">
                            <div className="p-4">
                                <p className='text-danger'>{error.message}</p>
                            </div>
                        </div>
                        :
                        <table id="datatable" className="table table-borderless table-striped">
                            <thead>
                            <tr>
                                <th style={{width: '30px'}}>#</th>
                                <th>Description</th>

                                <th  style={{width: '100px'}}>Status</th>
                                <th  style={{width: '40px'}}>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                                {urlData && urlData.map((item, index) => {
                                    let statusColor = item?.status === '1' ? 'badge-success-inverse' : item?.status === '6' ? 'badge-success-inverse' : item?.status == '7' ? 'badge-danger-inverse' : 'badge-info-inverse'
                                    let statusText = item?.status === '1' ? 'Preparing' : item?.status === '6' ? 'Provisioning' : item?.status == '7' ? 'Ready' : 'Started'
                                    let productUrl = '/product/'+ item?.product_id
                                    let externalUrl= item?.url_protocol +"://"+ item?.internal_url;
                                    return (
                                        <tr key={index}>
                                            <td>{Number(item?.id).toString().padStart(6,'0')}</td>
                                            <td>
                                                <a className="mr-3" href={externalUrl} target='_blank'><b>{externalUrl}</b></a> -  {item?.description}
                                            </td>

                                            <td><span className={`badge ${statusColor}`}>{statusText}</span></td>
                                            {/* <td><a className="mr-3" href={productUrl}><i className="fe fe-edit"></i></a></td> */}
                                            <td>
                                                <a className="mr-3" href={productUrl}>
                                                    <img src={getImage('arrow-next.png')} alt='next' />
                                                </a>
                                            </td>
                                        </tr>
                                    )
                                })}
                            </tbody>
                        </table>
                    }
                    </div>
                </div>
            </div>
        </div>
    </>
  )
}