import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import {useQuery} from "@tanstack/react-query";
import queryKeys from "../../services/queryKeys";
import {getReportsTopicsList} from "../../services/services";
import PaymentReportTable from "./PaymentReportTable";
import ProductReportTable from "./ProductReportTable";


export default function Reports() {

    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.my_files,
        queryFn: () => {
            let reqData = {
                token: localStorage.getItem('token'), // USER TOKEN
                uid: localStorage.getItem('uid') // USER UID
            }
            return getReportsTopicsList(reqData)
        }
    })

    const reportTopicList = data?.data?.topics?.topics;

    return (
        <>
            <BreadcrumbComBS title='Reports' paths={['Dashboard', 'Reports']}/>
            <div className="row">
                <div>
                    <div>
                        <div className="card card-statistics" style={{minHeight: '550px'}}>
                            {/*<div className="card-header">*/}
                            {/*    <div className="card-heading">*/}
                            {/*        <h4 className="card-title"> Tab vertical </h4>*/}
                            {/*    </div>*/}
                            {/*</div>*/}
                            <div className="card-body">
                                <div className="tab tab-vertical">
                                    <ul className="nav nav-tabs" role="tablist">
                                        {reportTopicList && reportTopicList.map((item, index) => {
                                                return (
                                                    <li className="nav-item">
                                                        <a className="nav-link" id={`report-${item.url}-tab`}
                                                           data-toggle="tab" href={`#`} role="tab"
                                                           aria-controls="home-09" aria-selected="true"> {item.name}</a>
                                                    </li>
                                                )
                                            }
                                        )
                                        }
                                    </ul>
                                    <div className="tab-content">
                                        <div className="tab-pane fade active show" id="home-09" role="tabpanel"
                                             aria-labelledby="home-09-tab">
                                            {<PaymentReportTable/>}
                                        </div>
                                        <div className="tab-pane fade" id="profile-09" role="tabpanel"
                                             aria-labelledby="profile-09-tab">
                                            {<ProductReportTable/>}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}