import {useEffect, useState} from 'react';
import {useLocation, useNavigate} from 'react-router-dom'
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query'
import queryKeys from '../../services/queryKeys'
import { getProductView } from "../../services/siteServices";
import ProductDetails from './ProductDetails';

export default function ProductView() {

    const {state} = useLocation()
    const navigate = useNavigate()

    useEffect(() => {
        if (!state?.productID) {
            navigate(RouteLinks.homePage, {replace: true})
        }
    }, [])

    const {data, isFetching, status, isError, error} = useQuery({
        queryKey: queryKeys.product_view,
        queryFn: () => {
            const reqData = {
                // page,
                // ...filterData
                product_id : state?.productID
            }
            return getProductView(reqData)
        },
        staleTime: 0 // 0 mins
    })
    const countryData = data?.data // PRODUCT VIEW LIST
    console.log('DATA', countryData)

    return (
        <div className='w-full flex flex-col gap-8'>
            <BreadcrumbCom title={`Product View [${state?.productID}]`} paths={['Dashboard', 'Product View']}/>

            <div className='flex flex-col gap-4'>
                <div className='flex flex-col gap-2'>
                    <p className='text-lg dark:text-white-light'>Product Configuration</p>
                    <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>

                        <table className="py-2 w-full text-sm">
                            <thead className="py-2 text-sm text-slate-500 text-left">
                                <tr>
                                    <th scope="col" className="px-2 py-2" style={{width: '150px'}}>
                                        Item
                                    </th>
                                    <th scope="col" className="px-2">
                                        Value
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            <tr className="py-2 border-t border-dashed border-slate-300">
                                <td className="px-2 py-2">
                                    <div
                                        className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                        <div className="text-left">
                                            ProductID
                                        </div>
                                    </div>
                                </td>
                                <td className="px-2">
                                    <div className="text-left">
                                        P000008
                                    </div>
                                </td>
                            </tr>

                            <tr className="py-2 border-t border-dashed border-slate-300">
                                <td className="px-2 py-2">
                                    <div
                                        className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                        <div className="text-left">
                                            ProductID
                                        </div>
                                    </div>
                                </td>
                                <td className="px-2">
                                    <div className="text-left">
                                        P000008
                                    </div>
                                </td>
                            </tr>
                            <tr className="py-2 border-t border-dashed border-slate-300">
                                <td className="px-2 py-2">
                                    <div
                                        className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                        <div className="text-left">
                                            ProductID
                                        </div>
                                    </div>
                                </td>
                                <td className="px-2">
                                    <div className="text-left">
                                        P000008
                                    </div>
                                </td>
                            </tr>
                            <tr className="py-2 border-t border-dashed border-slate-300">
                                <td className="px-2 py-2">
                                    <div
                                        className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                        <div className="text-left">
                                            ProductID
                                        </div>
                                    </div>
                                </td>
                                <td className="px-2">
                                    <div className="text-left">
                                        P000008
                                    </div>
                                </td>
                            </tr>
                            <tr className="py-2 border-t border-dashed border-slate-300">
                                <td className="px-2 py-2">
                                    <div
                                        className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                        <div className="text-left">
                                            ProductID
                                        </div>
                                    </div>
                                </td>
                                <td className="px-2">
                                    <div className="text-left">
                                        P000008
                                    </div>
                                </td>
                            </tr>
                            <tr className="py-2 border-t border-dashed border-slate-300">
                                <td className="px-2 py-2">
                                    <div
                                        className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                        <div className="text-left">
                                            ProductID
                                        </div>
                                    </div>
                                </td>
                                <td className="px-2">
                                    <div className="text-left">
                                        P000008
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>

                <div className='box bg-[aliceblue] dark:bg-black-box text-black-body dark:text-white-body'>
                    <div className='flex flex-col gap-2'>
                        <p className='text-lg'>Product Details</p>
                        <ProductDetails />
                    </div>
                </div>
            </div>
        </div>
    )
}