import React, { useRef, useState } from 'react'
import { Nav, Tooltip } from 'react-bootstrap'
import { NavLink, useNavigate, Link, useLocation } from 'react-router-dom'

import {
    jobopeningmanagement,
    home,
    privacypolicy,
    signin,
    category,
    faqcategory,
    faqsubcategory,
    compliance,
    faq,
    jobapplicationmanagement,
    blogs,
    appointments,
    contactus,
    testimonial,
    clientpartner,
    jobalert,
    clientAppointment,
} from '../../../Routes/routingConsts'

import { ReactComponent as DashIcon } from '../../../assets/images/dashboard-icon.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 ContentManage } from '../../../assets/images/content-management-icon.svg'
import { ReactComponent as CategoryIcon } from '../../../assets/images/category-icon.svg'
import { ReactComponent as FAQCategory } from '../../../assets/images/faq-category-icon.svg'
import { ReactComponent as IconCategory} from '../../../assets/images/icon-category-black.svg'
import { ReactComponent as IconSubCategory} from '../../../assets/images/icon-subcategory-black.svg'
import { ReactComponent as FAQSubCategory } from '../../../assets/images/faq-sub-category-icon.svg'
import { ReactComponent as BlogsIcon } from '../../../assets/images/blogs-icon.svg'
import { ReactComponent as ContactusIcon } from '../../../assets/images/contactus-icon.svg'
import { ReactComponent as JobAlertIcon } from '../../../assets/images/jobalert.svg'
import { ReactComponent as ComplianceIcon } from '../../../assets/images/compliance-icon.svg'
import { ReactComponent as ClientpartnerIcon } from '../../../assets/images/clientpartnerIcon.svg'
import { ReactComponent as TestimonialIcon } from '../../../assets/images/testimonialIcon.svg'

//Appoitments-SVGs
import { ReactComponent as AppoitnmentIcon } from '../../../assets/images/AppointmentsLogo.svg'
import { ReactComponent as CandidateAppointmentsIcon } from '../../../assets/images/CandidateAppointmentsLogo.svg'
import { ReactComponent as ClientAppointmentsIcon } from '../../../assets/images/ClientAppointmentsLogo.svg'

import { useAdminInfo } from '../../../context/AdminContextDetail'
import requestApi from '../../../utils/request'
import DeleteModal from '../../DeleteModal'
import { useMutation } from 'react-query'
import Swal from 'sweetalert2'

async function logoutUser() {
    return await requestApi.post(`/logout`)
}

const Sidebar = ({childValue,setChildValue}) => {

    const currentUserContext = useAdminInfo()
    const navigate = useNavigate()
    const location = useLocation()
    const toggleref = useRef(null)

    const URLPaths=[
            "/privacypolicy",
            "/Termsandcondition",
            "/gdpr-policy",
            "/esg-policy",
            "/gender-pay-gap",
            "/carbon-reduction-plan",
            "/modern-slavery-act"
    ]

    const [toggle, setToggle] = useState(false)
    const [faqToggle, setFaqToggle] = useState(false);
    const [AppointmentToggle,setAppointmentToggle] = useState(false)
    const handleToggle = () => {
        setToggle((current) => !current)
        toggleref.current.classList.toggle('active')
    }

    return (
        <>
            <div
            //  className="sidebar" 
             className={`sidebar ${childValue  === false ? 'active' : ''}`}>
                {/* <button
                    className="common-btn collapse-icon"
                    onClick={handleToggle}
                >
                    <BurgerIcon />
                </button> */}
                <Nav as="ul" className="mx-auto navbar"  ref={toggleref}>
                    <Nav.Item as="li" onClick={() => {
                        setFaqToggle(false) 
                        setAppointmentToggle(false)
                        }}>
                        <Nav.Link as={NavLink} to={home} className={`${location.pathname.includes("dashboard")?"active":""}`} end 
                        data-toggle="tooltip" data-placement="top" title="Dashboard">
                            <span>
                                <DashIcon />
                            </span>{' '}
                            
                            <span className="link-text">
                            Dashboard
                            </span>
                        </Nav.Link>
                    </Nav.Item>

                    <Nav.Item as="li" onClick={() => {
                        setFaqToggle(false) 
                        setAppointmentToggle(false)
                        }}>
                        <Nav.Link as={NavLink} to={category} end data-toggle="tooltip" data-placement="top" title="Job Category">
                            <span className="mjob">
                                <CategoryIcon />
                            </span>{' '}        
                            <span className="link-text">
                            Job Category
                            </span>
                        </Nav.Link>
                    </Nav.Item>

                    <Nav.Item as="li" onClick={() =>  {
                        setFaqToggle(false) 
                        setAppointmentToggle(false)
                        }}>
                        <Nav.Link
                            className={`${location.pathname.includes("view-job-opening") || location.pathname.includes("/creatnewopening") ?"active":""}`} 
                         as={NavLink} to={jobopeningmanagement} end
                         data-toggle="tooltip" data-placement="top" title="Job Opening Management">
                            <span className="mjob">
                                <JobIcon />
                            </span>{' '}
                            <span className="link-text">
                            Job Opening Management
                            </span>
                            
                        </Nav.Link>
                    </Nav.Item>

                    <Nav.Item as="li" onClick={() => {
                        setFaqToggle(false) 
                        setAppointmentToggle(false)
                        }}>
                        <Nav.Link 
                        //  className={location.state === "Create New Opening" ? 'active' :  ''}
                         as={NavLink} to={jobapplicationmanagement} end
                         data-toggle="tooltip" data-placement="top" title="Job Application Management">
                            <span className="mjob">
                                <JobApplicationIcon />
                            </span>{' '}
                            <span  className="link-text">
                            Job Application Management
                            </span>
                            
                        </Nav.Link>
                    </Nav.Item>

                    <Nav.Item as="li" onClick={() =>  {
                        setFaqToggle(false) 
                        setAppointmentToggle(false)
                        }}>
                        <Nav.Link as={NavLink} to={compliance} end
                         data-toggle="tooltip" data-placement="top" title="Compliance">
                            <span className="mjob">
                                <ComplianceIcon />
                            </span>
                            <span  className="link-text">
                            Compliance
                            </span>
                        </Nav.Link>
                    </Nav.Item>
                    
                    <Nav.Item as="li" onClick={() => 
                        {
                            setAppointmentToggle(false)
                            setFaqToggle(!faqToggle)
                        }
                        } className={faqToggle==true ? "droparrow" :"arrow"}>
                        <Nav.Link as={NavLink} to={faqcategory} end className={`faq ${location.pathname=="/faq-addedit" || location.pathname=="/faq-category" || location.pathname.includes("viewfaq") || location.pathname.includes("faq-addedit") || location.pathname=="/faq-subcategory" ? "active":"" || location.pathname=="/faq-management" ? "active":""}`  }
                        data-toggle="tooltip" data-placement="top" title="Faq"> 
                            <span className="mjob">
                                <FAQCategory />
                            </span>
                            
                            <span  className="link-text">
                            FAQ
                            </span>
                        </Nav.Link>
                    </Nav.Item>
                    <div className='faq-dropdown-content'>
                    {faqToggle && <>
                      
                        <Nav.Item as="li" onClick={()=>{
                            setFaqToggle(true)
                        setAppointmentToggle(false)
                        }}>
                            <Nav.Link as={NavLink} to={faqcategory} end
                            data-toggle="tooltip" data-placement="top" title="Faq Category">
                                <span className="mjob">
                                    <IconCategory/>
                                </span>{' '}
                                <span  className="link-text">
                               Category
                            </span>
                            </Nav.Link>
                        </Nav.Item>
                        <Nav.Item as="li" onClick={()=>{
                            setFaqToggle(true)
                            setAppointmentToggle(false)
                        }}>
                            <Nav.Link as={NavLink} to={faqsubcategory}
                            className={`${location.pathname.includes("faq-addedit-subcategory")?"active":""}`}
                            end data-toggle="tooltip" data-placement="top" title="Faq Sub-Category">
                                <span className="mjob">
                                    <IconSubCategory />
                                </span>
                                <span  className="link-text">
                              Sub-Category
                            </span>
                            </Nav.Link>
                        </Nav.Item>
                        <Nav.Item as="li" onClick={() => {
                        setFaqToggle(true)
                        setAppointmentToggle(false)
                        }
                        }>
                            <Nav.Link as={NavLink} to={faq} end
                            className={`${location.pathname.includes("faq-addedit") || location.pathname.includes("viewfaq") ?"active":""}`}
                            data-toggle="tooltip" data-placement="top" title="Faq Management" > 
                                <span className="mjob">
                                    <FAQCategory />
                                </span>
                                
                                <span  className="link-text">
                                FAQ Management
                                </span>
                            </Nav.Link>
                        </Nav.Item>
                    </>}
                    </div>


                    <Nav.Item as="li" onClick={() => 
                        {setFaqToggle(false)
                            setAppointmentToggle(false)
                        }
                        } >
                        <Nav.Link as={NavLink} to={blogs} end data-toggle="tooltip" data-placement="top" title="Blogs" className={`${location.pathname.includes("/viewblog/")?"active":"" || location.pathname.includes("/create-blog") ?"active":""}`}>
                            <span className="mjob">
                                <BlogsIcon />
                            </span>
                            <span  className="link-text">
                            Blogs
                            </span>
                        </Nav.Link>
                    </Nav.Item>
                    <Nav.Item as="li" onClick={() => {setFaqToggle(false)
                     setAppointmentToggle(false)}}>
                        <Nav.Link as={NavLink} to={testimonial} end data-toggle="tooltip" data-placement="top" title="Testimonials">
                            <span className="mjob">
                                <TestimonialIcon />
                            </span>
                            <span  className="link-text">
                            Testimonial Management
                            </span>
                        </Nav.Link>
                    </Nav.Item>

                    <Nav.Item as="li" onClick={() => {setFaqToggle(false)
                     setAppointmentToggle(false)
                    }}>
                        <Nav.Link as={NavLink} to={clientpartner} end data-toggle="tooltip" data-placement="top" title="Client Partner">
                            <span className="mjob">
                                <ClientpartnerIcon />
                            </span>
                            <span  className="link-text">
                            Client Partner
                            </span>
                        </Nav.Link>
                    </Nav.Item>
                    {/* Appoitment Dropdown */}
                    <Nav.Item as="li" onClick={() =>{
                        setFaqToggle(false)
                       setAppointmentToggle(!AppointmentToggle)
                    }
                        } className={AppointmentToggle==true ? "droparrow" :"arrow"}>
                        <Nav.Link as={NavLink} to={appointments} end className={`faq 
                        ${
                            // location.pathname=="/faq-addedit" || location.pathname=="/faq-category" || 
                            location.pathname=="/client-appointment" ? "active":"" || 
                        location.pathname=="/appointments" ? "active":""
                    }`  }
                        data-toggle="tooltip" data-placement="top" title="Appoitment" > 
                            <span className="mjob">
                                <AppoitnmentIcon />
                            </span>
                            
                            <span  className="link-text">
                            Appointments
                            </span>
                        </Nav.Link>
                    </Nav.Item>

                                <div className='faq-dropdown-content'>
                    {AppointmentToggle && <>
                      
                        <Nav.Item as="li" onClick={()=>{
                            setFaqToggle(false)
                            setAppointmentToggle(true)
                        }
                            }>
                            <Nav.Link as={NavLink} to={appointments} end
                            data-toggle="tooltip" data-placement="top" title="Candidate Appointments">
                                <span className="mjob">
                                    <CandidateAppointmentsIcon />
                                </span>{' '}
                                <span  className="link-text">
                                Candidate
                            </span>
                            </Nav.Link>
                        </Nav.Item>
                        <Nav.Item as="li" onClick={()=>
                              {setFaqToggle(false)
                            setAppointmentToggle(true)}
                            }>
                            <Nav.Link as={NavLink} to={clientAppointment}
                            className={`${location.pathname.includes("client-appointment")?"active":""}`}
                            end data-toggle="tooltip" data-placement="top" title="Client Appointments">
                                <span className="mjob">
                                    <ClientAppointmentsIcon />
                                </span>
                                <span  className="link-text">
                               Client 
                            </span>
                            </Nav.Link>
                        </Nav.Item>
                    </>}
                    </div>
















                    <Nav.Item as="li" onClick={() => {setFaqToggle(false); setAppointmentToggle(false)}}>
                        <Nav.Link as={NavLink} to={contactus} end data-toggle="tooltip" data-placement="top" title="Contacts us">
                            <span className="mjob">
                                <ContactusIcon />
                            </span>
                            <span  className="link-text">
                            Contacts us
                            </span>
                        </Nav.Link>
                    </Nav.Item>

                    <Nav.Item as="li" onClick={() => {setFaqToggle(false); setAppointmentToggle(false)}}>
                        <Nav.Link as={NavLink} to={jobalert} end data-toggle="tooltip" data-placement="top" title=" Job Alert">
                            <span className="mjob">
                                <JobAlertIcon />
                            </span>
                            <span  className="link-text">
                            Job Alert
                            </span>
                        </Nav.Link>
                    </Nav.Item>
                    
                    <Nav.Item as="li" onClick={() => {setFaqToggle(false); setAppointmentToggle(false)}}>
                        <Nav.Link as={NavLink} to={privacypolicy}
                        className={
                                URLPaths.includes(location.pathname)?"active":""
                            }
                        end data-toggle="tooltip" data-placement="top" title="Content Management">
                            <span>
                                <ContentManage />
                            </span>{' '}
                            <span  className="link-text">
                            Content Management
                            </span>
                        </Nav.Link>
                    </Nav.Item>
                </Nav>
            </div>
        </>
    )
}

export default Sidebar