import React, { useRef } from 'react'
import { Dropdown, Navbar, Nav, DropdownButton } from 'react-bootstrap'
import { useNavigate, NavLink } from 'react-router-dom'
import { ReactComponent as LogoIcon } from '../../../assets/images/logo-text.svg'
import { ReactComponent as HeaderLogo} from '../../../assets/images/header_logo.svg'
import { ReactComponent as DashIcon } from '../../../assets/images/dashboard-icon.svg'
import { ReactComponent as LogoutIcon } from '../../../assets/images/logout.svg'
import { ReactComponent as DropdownLogoIcon } from '../../../assets/images/company-details-logo.svg'
import { ReactComponent as ContentManage } from '../../../assets/images/content-management-icon.svg'
import { ReactComponent as BurgerIcon } from '../../../assets/images/hamburgermenuicon.svg'
import { ReactComponent as CategoryIcon } from '../../../assets/images/category-icon.svg'
import { ReactComponent as ComplianceIcon } from '../../../assets/images/compliance-icon.svg'
import { ReactComponent as FAQCategory } from '../../../assets/images/faq-category-icon.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 AppointmentsIcon } from '../../../assets/images/appointments-icon.svg'
import { ReactComponent as ContactusIcon } from '../../../assets/images/contactus-icon.svg'
import { ReactComponent as JobIcon } from '../../../assets/images/job-opening-management-icon.svg'
import { ReactComponent as ApplicationIcon } from '../../../assets/images/Job-application-management-icon.svg'
import AdminIcon from '../../../assets/images/admin.png'
import { useAdminInfo } from '../../../context/AdminContextDetail'

import {

    jobopeningmanagement,
    jobapplicationmanagement,
    signin,
    home,
    editprofile,
    category,
    compliance,
    faq,
    faqcategory,
    faqsubcategory,
    blogs,
    appointments,
    contactus,
    privacypolicy
} from '../../../Routes/routingConsts'
import { useState } from 'react'
import DeleteModal from '../../DeleteModal'
import { useMutation } from 'react-query'
import Swal from 'sweetalert2'
import requestApi from '../../../utils/request'

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

const Header = ({ setChildValue, childValue }) => {
    const currentUserContext = useAdminInfo()
    const navigate = useNavigate()
    const toggleClick = useRef(null)
    const [toggle, setToggle] = useState(false)
    const toggleref = useRef(null)
    const handleToggleClick = (from) => {
        if (window.visualViewport.width <= 991) {
            if (from === 'account') {
                if (!toggleClick.current?.className.includes('collapsed')) {
                    toggleClick.current?.click()
                }
            } else {
                toggleClick.current.click()
            }
        }
    }

    const [isDeleteModal, setIsDeleteModal] = useState(false)
    const handleDeleteModal = () => {
        setIsDeleteModal(true)
    }

    const handleToggle = () => {
        // setToggle((current) => !current)
        // toggleref.current.classList.toggle('active')
        setChildValue(!childValue)
    }

    const logoutMutation = useMutation(logoutUser, {
        onSuccess: (data) => {
            currentUserContext.setCurrentUser(null)
            localStorage.removeItem('admin')
            localStorage.removeItem('adminToken')
            handleToggleClick()
            // queryClient.invalidateQueries(['job-listing', 1])
            setIsDeleteModal(false)
            navigate(signin)
        },
        onError: (error) => {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: '',
                text: error?.message
            })
        }
    })
   
    const URLPaths = [
        '/privacypolicy',
        '/Termsandcondition',
        '/gdpr-policy',
        '/esg-policy',
        '/gender-pay-gap',
        '/carbon-reduction-plan',
        '/modern-slavery-act'
    ]
    return (
        <Navbar expand="lg">
            <div className="headerbox" ref={toggleref}>
                <div className={`header-top ${childValue  === false ? 'active' : ''}`}>
                    <Navbar.Brand
                        as={NavLink}
                        to={home}
                        onClick={handleToggleClick('account')}
                    >
                      
                        <HeaderLogo className="admin-logo"  />
                        <LogoIcon className="admin-logo logo-text" />
                        
                    </Navbar.Brand>

                    <div className="collapse-icon" onClick={handleToggle}>
                        <BurgerIcon />
                    </div>
                </div>
                <div className='wrap-header'>
                <DropdownButton
                    align="end"
                    title={
                        <img
                            src={AdminIcon}
                            className="img-fluid"
                            alt=""
                            style={{
                                width: '40px',
                                objectFit: 'contain'
                            }}
                        />
                    }
                    id="dropdown-menu-align-end"
                    className="myaccount-btn"
                >
                    <Dropdown.Item
                        eventKey="1"
                        onClick={() => {
                            navigate(editprofile)
                            handleToggleClick('account')
                        }}
                    >
                        My Account
                    </Dropdown.Item>
                    <Dropdown.Item
                        eventKey="2"
                        onClick={() => handleDeleteModal()}
                    >
                       Logout
                    </Dropdown.Item>
                </DropdownButton>
                <Navbar.Toggle
                    aria-controls="basic-navbar-nav"
                    ref={toggleClick}
                />
                </div>
                <Navbar.Collapse id="basic-navbar-nav">
                    <Navbar.Collapse
                        id="basic-navbar-nav"
                        className=" justify-content-end"
                    >
                        <div className="mobile-menu scrollbar">
                            <Nav as="ul" className="mx-auto navbar">
                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={home}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <DashIcon />
                                        </span>{' '}
                                        Dashboard
                                    </Nav.Link>
                                </Nav.Item>
                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={category}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <CategoryIcon />
                                        </span>{' '}
                                        Job Category
                                    </Nav.Link>
                                </Nav.Item>
                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={jobopeningmanagement}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <JobIcon />
                                        </span>{' '}
                                        Job Opening Management
                                    </Nav.Link>
                                </Nav.Item>
                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={jobapplicationmanagement}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <ApplicationIcon />
                                        </span>{' '}
                                        Job Application Management
                                    </Nav.Link>
                                </Nav.Item>
                                
                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={compliance}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <ComplianceIcon />
                                        </span>{' '}
                                        Compliance
                                    </Nav.Link>
                                </Nav.Item>
                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={faq}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <FAQCategory />
                                        </span>{' '}
                                        FAQ
                                    </Nav.Link>
                                </Nav.Item>
                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={faqcategory}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <FAQCategory />
                                        </span>{' '}
                                        FAQ Category
                                    </Nav.Link>
                                </Nav.Item>
                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={faqsubcategory}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <FAQSubCategory />
                                        </span>{' '}
                                        FAQ Sub-Category
                                    </Nav.Link>
                                </Nav.Item>

                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={blogs}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <BlogsIcon />
                                        </span>{' '}
                                        Blogs
                                    </Nav.Link>
                                </Nav.Item>

                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={appointments}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <AppointmentsIcon />
                                        </span>{' '}
                                        Appointments
                                    </Nav.Link>
                                </Nav.Item>

                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={contactus}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <ContactusIcon />
                                        </span>{' '}
                                        Contacts us
                                    </Nav.Link>
                                </Nav.Item>

                                <Nav.Item as="li">
                                    <Nav.Link
                                        end
                                        as={NavLink}
                                        to={privacypolicy}
                                        onClick={() => handleToggleClick()}
                                    >
                                        <span>
                                            <ContentManage />
                                        </span>{' '}
                                        Content Management
                                    </Nav.Link>
                                </Nav.Item>
                            </Nav>
                        </div>
                        <div className="myaccount-login">
                            <Dropdown className="header-dropdown">
                                <Dropdown.Toggle
                                    variant="success"
                                    id="dropdown-basic"
                                    align="end"
                                >
                                    {currentUserContext?.currentUser ? (
                                        <div className="logo">
                                            {/* <DropdownLogoIcon className="drop-logo" /> */}
                                            <img
                                                src={
                                                    currentUserContext
                                                        ?.currentUser
                                                        ?.profilePic
                                                }
                                                alt=""
                                                width="35"
                                                height="35"
                                                style={{
                                                    objectFit: 'cover'
                                                }}
                                            />
                                        </div>
                                    ) : (
                                        <div className="logo">
                                            <DropdownLogoIcon className="drop-logo" />
                                        </div>
                                    )}
                                    <div className="user-name">
                                        {
                                            (currentUserContext?.currentUser
                                                ?.firstName) + " "
                                                +(  currentUserContext?.currentUser
                                                ?.lastName)
                                        }
                                        {/* &nbsp;
                                    {
                                        currentUserContext
                                            ?.currentUser
                                            ?.lastName
                                    }
                                    &nbsp; */}
                                    </div>
                                    {/* ChainTech */}
                                </Dropdown.Toggle>

                                <Dropdown.Menu>
                                    <Dropdown.Item
                                        // onClick={() => {
                                        //     navigate(editProfile)
                                        //     handleToggleClick('account')
                                        // }}

                                        onClick={() => {
                                            navigate(editprofile, {
                                                state: 'Edit Profile'
                                            })
                                            handleToggleClick('account')
                                        }}
                                    >
                                        My Account
                                    </Dropdown.Item>
                                    <Dropdown.Item
                                        // onClick={() => {
                                        //     currentUserContext.setCurrentUser(
                                        //         null
                                        //     )
                                        //     localStorage.removeItem('admin')
                                        //     localStorage.removeItem(
                                        //         'adminToken'
                                        //     )
                                        //     handleToggleClick()
                                        //     navigate(signin)
                                        // }}

                                        onClick={() => handleDeleteModal()}
                                    >
                                        Logout
                                    </Dropdown.Item>
                                </Dropdown.Menu>
                            </Dropdown>
                            <DeleteModal
                                message={
                                    <>
                                        Are you sure you want to <br /> Logout ?
                                    </>
                                }
                                handleDelete={() => {
                                    logoutMutation.mutate()
                                }}
                                isLoading={logoutMutation.isLoading}
                                setIsDeleteModal={setIsDeleteModal}
                                isDeleteModal={isDeleteModal}
                                // isLogout
                            />
                        </div>
                    </Navbar.Collapse>
                </Navbar.Collapse>
            </div>
        </Navbar>
    )
}

export default Header