import React from 'react'
import { useState } from 'react'
import { useQuery, useQueryClient } from 'react-query'
import { Link } from 'react-router-dom'
import { ReactComponent as JobOpeningIcon } from '../../assets/images/jobs-opening.svg'
import { ReactComponent as TotalAppIcon } from '../../assets/images/total-app.svg'
import { ReactComponent as TotalRejectIcon } from '../../assets/images/total-reject.svg'
import { ReactComponent as TotalSelectIcon } from '../../assets/images/total-select.svg'
import { ReactComponent as JobIcon } from '../../assets/images/job-opening-management-icon.svg'
import { ReactComponent as JobApplicationIcon } from '../../assets/images/Job-application-management-icon.svg'
import { ReactComponent as CategoryIcon } from '../../assets/images/category-icon.svg'
import { ReactComponent as AppointmentsIcon } from '../../assets/images/appointments-icon.svg'
import { ReactComponent as BlogsIcon } from '../../assets/images/blogs-icon.svg'
import { ReactComponent as ComplianceIcon } from '../../assets/images/compliance-icon.svg'
import { ReactComponent as City} from '../../assets/images/SideBar-icons/Color/City.svg'
import { ReactComponent as Industry} from '../../assets/images/SideBar-icons/Color/Industry.svg'
import { ReactComponent as Country} from '../../assets/images/SideBar-icons/Color/Country.svg'
import { ReactComponent as State} from '../../assets/images/SideBar-icons/Color/State.svg'
import { ReactComponent as Candidate} from '../../assets/images/Candidate.svg'
import { ReactComponent as Employee} from '../../assets/images/employee.svg'
import { ReactComponent as RejectedIcon} from '../../assets/images/rejected.svg'
import { ReactComponent as Jobreport} from '../../assets/images/jobreport.svg'

import { appointments, blogs, candidatemanagement, category, citymanagement, compliance, countrymanagement, employermanagement, industrymanagement, jobapplicationmanagement, jobopeningmanagement, statemanagement } from '../../Routes/routingConsts'
import requestApi from '../../utils/request'

const Dashboard = () => {
    
    const [dashboardFilter,setDashboardFilter] = useState()
    const queryClient = useQueryClient()
    function DashboardCMS({ queryKey }) {
        return requestApi
            .post(
                `/dashboard`,
                {
                    filterBy: queryKey[1]
                },
                { headers: true }
            )
            .then((res) => {
                return res.data
            })
    }
    const { data, isLoading } = useQuery({
        queryKey: ['employer-profile', dashboardFilter],
        queryFn: DashboardCMS
    })


    return (
        <div className="sidebar-content">
            <div className="admin-counter">
                <div className="row">
                
                    {/* <div className="col-xl-3 col-lg-6 col-md-6 col-12">
                        <Link to={candidatemanagement}>
                            <div className="card-box">
                                <div className="header-text">
                                    <div className="card-image lightyellow">
                                        <Candidate />
                                    </div>
                                    <h3>Candidate Management</h3>
                                </div>
                                <div className="card-content">
                                    <h2>{data?.data?.totalUser}</h2>
                                </div>
                                <div className="bottom-round-shape lightyellow"></div>
                            </div>
                        </Link>
                    </div> */}

                    {/* <div className="col-xl-3 col-lg-6 col-md-6 col-12">
                        <Link to={employermanagement}>
                            <div className="card-box">
                                <div className="header-text">
                                    <div className="card-image lightyellow">
                                        <Employee />
                                    </div>
                                    <h3>Employer Management</h3>
                                </div>
                                <div className="card-content">
                                    <h2>{data?.data?.totalEmployer}</h2>
                                </div>
                                <div className="bottom-round-shape lightyellow"></div>
                            </div>
                        </Link>
                    </div> */}

                    {/* <div className="col-xl-3 col-lg-6 col-md-6 col-12">
                        <Link to={jobapplicationmanagement}>
                        <div className="card-box">
                            <div className="header-text">
                                <div className="card-image blue">
                                    <TotalAppIcon />
                                </div>
                                <h3>Total Applications</h3>
                            </div>
                            <div className="card-content">
                                <h2>{data?.data?.totalApplication}</h2>
                            </div>
                            <div className="bottom-round-shape blue"></div>
                        </div>
                        </Link>
                    </div> */}
                    {/* <div className="col-xl-3 col-lg-6 col-md-6 col-12">
                        <div className="card-box">
                            <div className="header-text">
                                <div className="card-image lightyellow">
                                    <TotalSelectIcon />
                                </div>
                                <h3>Total Selected</h3>
                            </div>
                            <div className="card-content">
                                <h2>{data?.data?.totalSelected}</h2>
                            </div>
                            <div className="bottom-round-shape lightyellow"></div>
                        </div>
                    </div> */}
                    {/* <div className="col-xl-3 col-lg-6 col-md-6 col-12">
                        <div className="card-box">
                            <div className="header-text">
                                <div className="card-image lightpink">
                                    <TotalRejectIcon />
                                </div>
                                <h3>Total Rejected</h3>
                            </div>
                            <div className="card-content">
                                <h2>{data?.data?.totalRejected}</h2>
                            </div>
                            <div className="bottom-round-shape lightpink"></div>
                        </div>
                    </div> */}

                    {/* <div className="col-xl-3 col-lg-6 col-md-6 col-12">
                        <Link to={industrymanagement}>
                        <div className="card-box">
                            <div className="header-text">
                                <div className="card-image blue">
                                    <Industry />
                                </div>
                                <h3>Industry Management</h3>
                            </div>
                            <div className="card-content">
                                <h2>{data?.data?.totalIndustry}</h2>
                            </div>
                            <div className="bottom-round-shape blue"></div>
                        </div>
                        </Link>
                    </div> */}

                    <div className="col-xl-4 col-lg-6 col-md-6 col-12">
                        <Link to={category}>
                        <div className="card-box">
                            <div className="header-text">
                                <div className="card-image blue">
                                    <CategoryIcon />
                                </div>
                                <h3> Job Categories</h3>
                            </div>
                           
                            <div className="bottom-round-shape blue"> <div className="card-content">
                                <h2>{data?.data?.totalCategory}</h2>
                            </div></div>
                        </div>
                        </Link>
                    </div>


                    <div className="col-xl-4 col-lg-6 col-md-6 col-12">
                        <Link to={jobopeningmanagement}>
                        <div className="card-box">
                            <div className="header-text">
                                <div className="card-image">
                                    <JobIcon />
                                </div>
                                <h3>Job Opening Management</h3>
                            </div>
                           
                            <div className="bottom-round-shape">
                            <div className="card-content">
                                <h2>{data?.data?.totalJobOpenings}</h2>
                            </div>

                            </div>
                        </div>
                        </Link>
                    </div>
                    <div className="col-xl-4 col-lg-6 col-md-6 col-12">
                    <Link to={jobapplicationmanagement}>
                        <div className="card-box">
                            <div className="header-text">
                                <div className="card-image lightpink">
                                <JobApplicationIcon />
                                </div>
                                <h3> Job Applications Management</h3>
                            </div>
                           
                            <div className="bottom-round-shape lightpink">

                            <div className="card-content">
                                <h2>{data?.data?.totalApplication}</h2>
                            </div>
                            </div>
                        </div>
                        </Link>
                    </div>

                    
                    <div className="col-xl-4 col-lg-6 col-md-6 col-12">
                    <Link to={compliance}>
                        <div className="card-box">
                            <div className="header-text">
                                <div className="card-image light-green">
                                    <ComplianceIcon />
                                </div>
                                <h3>Compliances</h3>
                            </div>
                           
                            <div className="bottom-round-shape light-green"> <div className="card-content">
                                <h2>{data?.data?.totalCompliance}</h2>
                            </div></div>
                        </div>
                        </Link>
                    </div>
                    <div className="col-xl-4 col-lg-6 col-md-6 col-12">
                    <Link to={blogs}>
                        <div className="card-box">
                            <div className="header-text">
                                <div className="card-image off-white">
                                    <BlogsIcon />
                                </div>
                                <h3>Blogs</h3>
                            </div>
                           
                            <div className="bottom-round-shape off-white">
                            <div className="card-content">
                                <h2>{data?.data?.totalBlog}</h2>
                            </div>
                            </div>
                        </div>
                        </Link>
                    </div>
                    <div className="col-xl-4 col-lg-6 col-md-6 col-12">
                    <Link to={appointments}>
                        <div className="card-box">
                            <div className="header-text">
                                <div className="card-image light-purple">
                                    <AppointmentsIcon />
                                </div>
                                <h3>Appointments</h3>
                            </div>
                           
                            <div className="bottom-round-shape light-purple">
                            <div className="card-content">
                                <h2>{data?.data?.totalBookCall}</h2>
                            </div>
                            </div>
                        </div>
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Dashboard