/* eslint-disable @next/next/no-img-element */
import { PropsWithChildren, useEffect } from 'react';
import style from '@/styles/modules/dashboard/dashboard-layout.module.scss';
import Link from 'next/link';
import { useState } from 'react';
import Offcanvas from 'react-bootstrap/Offcanvas';
import { Button, Col, Dropdown, Form, Row } from 'react-bootstrap';
import Image from 'react-bootstrap/Image';
import React from 'react';
import { useRouter } from 'next/router';
import Modal from 'react-bootstrap/Modal';
import RangeSlider from '../Rangeslider/Rangeslider';
import Select from 'react-select';
import { signOut, useSession } from 'next-auth/react';

export default function DashboardLayout({ children }: PropsWithChildren) {
  const [modalShowLogout, setModalShowLogout] = React.useState(false);
  const router = useRouter();
  const { data: session }: any = useSession();
  console.log('112212121', session);

  // active class
  //assigning location variable
  const location = useRouter();

  //destructuring pathname from location
  const { pathname } = location;

  //Javascript split method to get  the name of the path in array
  const splitLocation = pathname.split('/');

  // Sidebars

  const [low, setLow] = useState(-1000);
  const [high, setHigh] = useState(1000);
  const [type, setType] = useState<string>(`user`);
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const toggleShow = () => setShow((s) => !s);

  useEffect(() => {
    if (router.pathname === '/user/' || router.pathname.includes('/user/')) {
      setType(`user`);
    } else if (router.pathname === '/organizer' || router.pathname.includes('/organizer/')) {
      setType(`organizer`);
    } else if (router.pathname === '/admin' || router.pathname.includes('/admin/')) {
      setType(`admin`);
    } else if (router.pathname === '/guest' || router.pathname.includes('/guest/')) {
      setType(`guest`);
    }
  }, []);

  const [isChecked, setIsChecked] = useState(false);

  useEffect(() => {
    // Set initial checked state based on URL
    setIsChecked(router.pathname.includes('comment'));
  }, [router.pathname]);

  const handleSwitchChange = () => {
    const newChecked = !isChecked;
    setIsChecked(newChecked);

    // Navigate based on new checked state
    const newPath = newChecked ? '/user/dashboard/comment' : '/user/dashboard/';
    router.push(newPath);
  };

  const [isChecked2, setIsChecked2] = useState(false);

  useEffect(() => {
    // Set initial checked state based on URL
    setIsChecked2(router.pathname.includes('comment'));
  }, [router.pathname]);

  const handleSwitchChange2 = () => {
    const newChecked = !isChecked2;
    setIsChecked2(newChecked);

    // Navigate based on new checked state
    const newPath = newChecked
      ? '/organizer/organizer-dashboard/comment'
      : '/organizer/organizer-dashboard';
    router.push(newPath);
  };

  const [isChecked3, setIsChecked3] = useState(false);

  useEffect(() => {
    // Set initial checked state based on URL
    setIsChecked3(router.pathname.includes('comment'));
  }, [router.pathname]);

  const handleSwitchChange3 = () => {
    const newChecked = !isChecked3;
    setIsChecked3(newChecked);

    // Navigate based on new checked state
    const newPath = newChecked ? '/admin/admin-comment/comment' : '/admin';
    router.push(newPath);
  };

  const [isChecked4, setIsChecked4] = useState(false);

  useEffect(() => {
    // Set initial checked state based on URL
    setIsChecked4(router.pathname.includes('comment'));
  }, [router.pathname]);

  const handleSwitchChange4 = () => {
    const newChecked = !isChecked4;
    setIsChecked4(newChecked);

    // Navigate based on new checked state
    const newPath = newChecked ? '/admin/admin-comment/comment' : '/admin';
    router.push(newPath);
  };

  return (
    <>
      <section className={style.dashboard_layout}>
        <Offcanvas
          show={show}
          onHide={handleClose}
          backdrop={false}
          scroll={true}
          responsive={'xl'}
          className="main_sidebar"
        >
          <Offcanvas.Header closeButton></Offcanvas.Header>
          <Offcanvas.Body>
            <div className="logo">
              <img src="/images/given-logo.png" alt="" />
            </div>
            <div className="menu">
              {type === `user` && (
                <>
                  {' '}
                  <ul>
                    <div className="list">
                      <div className="unity-list">
                        <p className="mb-0">Unity Forum</p>
                        <Form>
                          <Form.Check // prettier-ignore
                            // label="Push"
                            // placeholder="On"
                            type="switch"
                            id="custom-switch"
                            checked={isChecked}
                            onChange={handleSwitchChange}
                            className="ms-lg-3 mt-lg-0 mt-3"
                          />
                        </Form>
                      </div>

                      <li
                        className={
                          router.pathname === '/user/dashboard' ||
                          router.pathname.includes('/user/dashboard')
                            ? 'active'
                            : ''
                        }
                      >
                        <Link href={'/user/dashboard'}>
                          <Image src={'/images/sidbar-icon/home.svg'} className="icn-hom" alt="" />{' '}
                          Home
                        </Link>
                      </li>
                      <li
                        className={
                          router.pathname === '/user/campaign' ||
                          router.pathname.includes('/user/campaign')
                            ? 'active'
                            : ''
                        }
                      >
                        <Link href={'/user/campaign'}>
                          <Image src={'/images/sidbar-icon/Vector-(2).svg'} alt="" /> Campaign
                        </Link>
                      </li>

                      <li
                        className={
                          router.pathname === '/user/favourite' ||
                          router.pathname.includes('/user/favourite')
                            ? 'active'
                            : ''
                        }
                      >
                        <Link href={'/user/favourite'}>
                          <Image src={'/images/sidbar-icon/Vector-(3).svg'} alt="" /> Favorite
                        </Link>
                      </li>

                      <li
                        className={
                          router.pathname === '/user/history' ||
                          router.pathname.includes('/user/history')
                            ? 'active'
                            : ''
                        }
                      >
                        <Link href={'/user/history'}>
                          <Image src={'/images/sidbar-icon/clock.svg'} alt="" /> History
                        </Link>
                      </li>

                      <li
                        className={
                          router.pathname === '/user/donate-given' ||
                          router.pathname.includes('/user/donate-given')
                            ? 'active'
                            : ''
                        }
                      >
                        <Link href={'/user/donate-given'}>
                          <Image src={'/images/sidbar-icon/Group-1.svg'} alt="" />
                          Donate to Given
                        </Link>
                      </li>

                      <li
                        className={
                          router.pathname === '/user/tax-report' ||
                          router.pathname.includes('/user/tax-report')
                            ? 'active'
                            : ''
                        }
                      >
                        <Link href={'/user/tax-report'}>
                          <Image src={'/images/sidbar-icon/Group-1.svg'} alt="" /> Tax Reports
                        </Link>
                      </li>

                      <li
                        className={
                          router.pathname === '/user/my-reviews' ||
                          router.pathname.includes('/user/my-reviews')
                            ? 'active'
                            : ''
                        }
                      >
                        <Link href={'/user/my-reviews'}>
                          <Image src={'/images/sidbar-icon/Union.svg'} alt="" />
                          My Reviews
                        </Link>
                      </li>

                      <li
                        className={
                          router.pathname === '/user/settings' ||
                          router.pathname.includes('/user/settings')
                            ? 'active'
                            : ''
                        }
                      >
                        <Link href={'/user/settings'}>
                          <Image src={'/images/setting-2.svg'} alt="" /> Setting
                          {/* <i className="icon-Group-1856"></i> Settings */}
                        </Link>
                      </li>
                      <li
                        className={
                          router.pathname === '/user/helpfeedback' ||
                          router.pathname.includes('/user/helpfeedback')
                            ? 'active'
                            : ''
                        }
                      >
                        <Link href={'/user/helpfeedback'}>
                          <Image src={'/images/sidbar-icon/Group-2.svg'} alt="" /> Help & Feedback
                        </Link>
                      </li>
                    </div>

                    {/* <div className="setting">

                  </div> */}

                    <li className="logout">
                      <Link href={''} onClick={() => setModalShowLogout(true)}>
                        <Image src={'/images/logout.svg'} alt="" />
                        Logout
                        {/* <i className="icon-Icon-metro-exit1"></i>  */}
                      </Link>
                    </li>
                  </ul>
                </>
              )}
              {type === `organizer` && (
                <>
                  <>
                    <ul>
                      <div className="list">
                        <div className="unity-list">
                          <p className="mb-0">Unity Forum</p>
                          <Form>
                            <Form.Check // prettier-ignore
                              // label="Push"
                              // placeholder="On"
                              type="switch"
                              id="custom-switch"
                              checked={isChecked2}
                              onChange={handleSwitchChange2}
                              className="ms-lg-3 mt-lg-0 mt-3"
                            />
                          </Form>
                        </div>
                        <li
                          className={
                            router.pathname === '/organizer/organizer-dashboard' ||
                            router.pathname.includes('/organizer/organizer-dashboard')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/organizer/organizer-dashboard'}>
                            <Image src={'/images/sidbar-home.svg'} className="icn-hom" alt="" />{' '}
                            Home
                          </Link>
                        </li>
                        <li
                          className={
                            router.pathname === '/organizer/organizer-campaign' ||
                            router.pathname.includes('/organizer/organizer-campaign')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/organizer/organizer-campaign'}>
                            <Image src={'/images/sidbar-icon/Vector-(2).svg'} alt="" /> Campaign
                          </Link>
                        </li>
                        <li
                          className={
                            router.pathname === '/organizer/history' ||
                            router.pathname.includes('/organizer/history')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/organizer/history'}>
                            <Image src={'/images/sidbar-icon/clock.svg'} alt="" /> History
                          </Link>
                        </li>
                        <li
                          className={
                            router.pathname === '/organizer/helpfeedback' ||
                            router.pathname.includes('/organizer/helpfeedback')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/organizer/helpfeedback'}>
                            <Image src={'/images/sidbar-icon/Group-2.svg'} alt="" /> Help & Feedback
                          </Link>
                        </li>
                        <li
                          className={
                            router.pathname === '/organizer/make-admin' ||
                            router.pathname.includes('/organizer/make-admin')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/organizer/make-admin'}>
                            <Image src={'/images/sidbar-icon/box.svg'} alt="" /> Make Admin
                          </Link>
                        </li>

                        <li
                          className={
                            router.pathname === '/organizer/settings' ||
                            router.pathname.includes('/organizer/settings')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/organizer/settings'}>
                            <Image src={'/images/setting-2.svg'} alt="" /> Setting
                            {/* <i className="icon-Group-1856"></i> Settings */}
                          </Link>
                        </li>
                      </div>

                      {/* <div className="setting">
                 
                </div> */}

                      <li className="logout">
                        <Link href={''} onClick={() => setModalShowLogout(true)}>
                          <Image src={'/images/logout.svg'} alt="" />
                          Logout
                          {/* <i className="icon-Icon-metro-exit1"></i>  */}
                        </Link>
                      </li>
                    </ul>
                  </>
                </>
              )}

              {type === `admin` && (
                <>
                  <>
                    {' '}
                    <ul>
                      <div className="list">
                        <div className="unity-list">
                          <p className="mb-0">Unity Forum</p>
                          <Form>
                            <Form.Check // prettier-ignore
                              // label="Push"
                              // placeholder="On"
                              type="switch"
                              id="custom-switch"
                              checked={isChecked3}
                              onChange={handleSwitchChange3}
                              className="ms-lg-3 mt-lg-0 mt-3"
                            />
                          </Form>
                        </div>
                        {/* <li
                          className={
                            router.pathname === "/admin/admin-campaign" || router.pathname.includes("/admin/admin-campaign") ?"active" :""
                          }
                        >
                          <li
                            className={
                              router.pathname === "/admin/admin-campaign" || router.pathname.includes("/admin/admin-campaign") ?"active" :""
                            }
                          >
                            <Link href={"/admin/admin-campaign"}>
                              <Image
                                src={"/images/sidbar-icon/Vector-(2).svg"}
                                alt=""
                              />{" "}
                              Campaign
                            </Link>
                          </li>
                          </li> */}

                        <li
                          className={
                            router.pathname === '/admin/admin-campaign' ||
                            router.pathname.includes('/admin/admin-campaign')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/admin/admin-campaign'}>
                            <Image src={'/images/sidbar-icon/Vector-(2).svg'} alt="" /> Campaign
                          </Link>
                        </li>

                        <li
                          className={
                            router.pathname === '/admin/helpfeedback' ||
                            router.pathname.includes('/admin/helpfeedback')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/admin/helpfeedback'}>
                            <Image src={'/images/sidbar-icon/Group-2.svg'} alt="" /> Help & Feedback
                          </Link>
                        </li>
                        <li
                          className={
                            router.pathname === '/admin/settings' ||
                            router.pathname.includes('/admin/settings')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/admin/settings'}>
                            <Image src={'/images/setting-2.svg'} alt="" /> Setting
                            {/* <i className="icon-Group-1856"></i> Settings */}
                          </Link>
                        </li>
                      </div>

                      {/* <div className="setting">

                  </div> */}

                      <li className="logout">
                        <Link href={''} onClick={() => setModalShowLogout(true)}>
                          <Image src={'/images/logout.svg'} alt="" />
                          Logout
                          {/* <i className="icon-Icon-metro-exit1"></i>  */}
                        </Link>
                      </li>
                    </ul>
                  </>
                </>
              )}

              {type === `guest` && (
                <>
                  <>
                    {' '}
                    <ul>
                      <div className="list">
                        <div className="unity-list">
                          <p className="mb-0">Unity Forum</p>
                          <Form>
                            <Form.Check // prettier-ignore
                              // label="Push"
                              // placeholder="On"
                              type="switch"
                              id="custom-switch"
                              checked={isChecked4}
                              onChange={handleSwitchChange4}
                              className="ms-lg-3 mt-lg-0 mt-3"
                            />
                          </Form>
                        </div>

                        {/* <li
                        className={
                          splitLocation[1] === "dashboard" ? "active" : ""
                        }
                      >
                        <Link href={"/dashboard"}>
                          <Image
                            src={"/images/sidbar-icon/home.svg"}
                            className="icn-hom"
                            alt=""
                          />{" "}
                          Home
                        </Link>
                      </li> */}
                        <li
                          className={
                            router.pathname === '/guest/guest-dashboard' ||
                            router.pathname.includes('/guest/guest-dashboard')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/guest/guest-dashboard'}>
                            <Image
                              src={'/images/sidbar-icon/home.svg'}
                              className="icn-hom"
                              alt=""
                            />{' '}
                            Home
                          </Link>
                        </li>

                        <li
                          className={
                            router.pathname === '/guest/donate-given' ||
                            router.pathname.includes('/guest/donate-given')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/guest/donate-given'}>
                            <Image src={'/images/sidbar-icon/Group-1.svg'} alt="" />
                            Donate to Given
                          </Link>
                        </li>

                        <li
                          className={
                            router.pathname === '/guest/setting' ||
                            router.pathname.includes('/guest/setting')
                              ? 'active'
                              : ''
                          }
                        >
                          <Link href={'/guest/setting'}>
                            <Image src={'/images/setting-2.svg'} alt="" /> Setting
                            {/* <i className="icon-Group-1856"></i> Settings */}
                          </Link>
                        </li>
                      </div>

                      {/* <div className="setting">

                  </div> */}

                      <li className="logout">
                        <Link href={''} onClick={() => setModalShowLogout(true)}>
                          <Image src={'/images/logout.svg'} alt="" />
                          Logout
                          {/* <i className="icon-Icon-metro-exit1"></i>  */}
                        </Link>
                      </li>
                    </ul>
                  </>
                </>
              )}
            </div>
          </Offcanvas.Body>
        </Offcanvas>
        <main className={style.main_content}>
          <header className={style.main_header}>
            {type === `user` && (
              <>
                {router.pathname === `/user/dashboard` ||
                router.pathname === '/user/campaign' ||
                router.pathname === '/user/dashboard/comment' ? (
                  <>
                    <>
                      <Row>
                        <Col md="7" sm="6">
                          <div className="d-flex topbar">
                            <Button variant="toggle" className="me-2" onClick={toggleShow}>
                              <i className="icon-menu"></i>
                            </Button>
                            <div className="top-heading">
                              <h4>Welcome {session?.user?.name?.slice(0, 5) || ''}</h4>
                            </div>
                          </div>
                        </Col>
                        <Col md="5" sm="6" className="">
                          <div className="droplist">
                            <div className="form-group mb-0 w-100">
                              <div className="icon-field search">
                                <img
                                  src={'/images/sidbar-icon/Search.svg'}
                                  className="magnifire"
                                  alt=""
                                />
                                <input
                                  type="text"
                                  className="form-control"
                                  placeholder="Search..."
                                  id=""
                                  name=""
                                  // onClick={() =>
                                  //   router.push("/user/dashboard/search-result")
                                  // }
                                />
                                {router.pathname === `/user/dashboard/comment` ? (
                                  <>
                                    <div className="filter-down">
                                      <Dropdown className="notification dropdown" align="end">
                                        <Dropdown.Toggle id="dropdown-autoclose-inside">
                                          <Image
                                            src={'/images/sidbar-icon/search-click.svg'}
                                            alt=""
                                          />
                                        </Dropdown.Toggle>
                                        <Dropdown.Menu>
                                          <Dropdown.Item href="#" className="border-bottom">
                                            <div className="drop-down ">
                                              <div className="notice">
                                                <h3>Categories</h3>
                                                <h3>Popular</h3>
                                              </div>
                                            </div>
                                          </Dropdown.Item>
                                          <Dropdown.Item href="#" className="">
                                            <div className="drop-down">
                                              <div className="filer">
                                                <Link href={'#'}>Category 1 </Link>
                                                <Link href={'#'}>Category 1 </Link>
                                              </div>
                                            </div>
                                          </Dropdown.Item>
                                          <Dropdown.Item href="#" className="">
                                            <div className="drop-down">
                                              <div className="filer">
                                                <Link href={'#'}>Category 1 </Link>
                                                <Link href={'#'}>Category 1 </Link>
                                              </div>
                                            </div>
                                          </Dropdown.Item>
                                          <Dropdown.Item href="#" className="">
                                            <div className="drop-down">
                                              <div className="filer">
                                                <Link href={'#'}>Category 1 </Link>
                                                <Link href={'#'}>Category 1 </Link>
                                              </div>
                                            </div>
                                          </Dropdown.Item>
                                          <Dropdown.Item href="#" className="border-bottom">
                                            <div className="drop-down">
                                              <div className="filer">
                                                <Link href={'#'}>Category 1 </Link>
                                                <Link href={'#'}>Category 1 </Link>
                                              </div>
                                            </div>
                                          </Dropdown.Item>
                                          <Dropdown.Item href="#" className="border-bottom">
                                            <div className="drop-down">
                                              <div className="filer">
                                                <Link href={'#'}>Category 1 </Link>
                                                <Link href={'#'}>Category 1 </Link>
                                              </div>
                                            </div>
                                          </Dropdown.Item>
                                          <Dropdown.Item href="#" className="">
                                            <div className="drop-down">
                                              <button className="w-100 btn-search">Search</button>
                                            </div>
                                          </Dropdown.Item>
                                        </Dropdown.Menu>
                                      </Dropdown>
                                    </div>
                                  </>
                                ) : (
                                  <>
                                    <div className="filter-down">
                                      <Dropdown className="notification dropdown" align="end">
                                        <Dropdown.Toggle id="dropdown-autoclose-inside">
                                          <Image
                                            src={'/images/sidbar-icon/search-click.svg'}
                                            alt=""
                                            onClick={() => router.push('/user/dashboard/filter')}
                                          />
                                        </Dropdown.Toggle>
                                      </Dropdown>
                                    </div>
                                  </>
                                )}
                              </div>
                            </div>
                            <ul>
                              <li>
                                <Dropdown className="notification dropdown" align="end">
                                  <Dropdown.Toggle id="dropdown-autoclose-inside">
                                    <Image src={'/images/sidbar-icon/notification.svg'} alt="" />
                                  </Dropdown.Toggle>
                                  <Dropdown.Menu>
                                    <Dropdown.Item href="#" className="border-bottom">
                                      <div className="drop-down ">
                                        <div className="notice">
                                          <h3>Notification</h3>
                                          <button type="button" className="btn note">
                                            +5
                                          </button>
                                        </div>
                                      </div>
                                    </Dropdown.Item>
                                    <Dropdown.Item href="#" className="border-bottom">
                                      <div className="drop-down">
                                        <div className="notify-1">
                                          <span>
                                            <p className="mb-0 fs-14">
                                              Lorem ipsum dolor sit amet, consectetur adipiscing
                                              elit
                                            </p>
                                          </span>
                                        </div>
                                      </div>
                                    </Dropdown.Item>
                                    <Dropdown.Item href="#" className="border-bottom">
                                      <div className="drop-down">
                                        <div className="notify-1">
                                          <span>
                                            <p className="mb-0 fs-14">
                                              Lorem ipsum dolor sit amet, consectetur adipiscing
                                              elit
                                            </p>
                                          </span>
                                        </div>
                                      </div>
                                    </Dropdown.Item>
                                    <Dropdown.Item href="#" className="border-bottom">
                                      <div className="drop-down">
                                        <div className="notify-1">
                                          <span>
                                            <p className="mb-0 fs-14">
                                              Lorem ipsum dolor sit amet, consectetur adipiscing
                                              elit
                                            </p>
                                          </span>
                                        </div>
                                      </div>
                                    </Dropdown.Item>
                                    <Dropdown.Item href="#" className="border-bottom">
                                      <div className="drop-down">
                                        <div className="notify-1">
                                          <span>
                                            <p className="mb-0 fs-14">
                                              Lorem ipsum dolor sit amet, consectetur adipiscing
                                              elit
                                            </p>
                                          </span>
                                        </div>
                                      </div>
                                    </Dropdown.Item>
                                    <Dropdown.Item href="#" className="border-bottom">
                                      <div className="drop-down">
                                        <div className="notify-1">
                                          <span>
                                            <p className="mb-0 fs-14">
                                              Lorem ipsum dolor sit amet, consectetur adipiscing
                                              elit
                                            </p>
                                          </span>
                                        </div>
                                      </div>
                                    </Dropdown.Item>
                                    <Dropdown.Item href="#" className="border-bottom">
                                      <div className="drop-down">
                                        <div className="view-btn">
                                          <button type="button" className="w-100 btn">
                                            View All
                                          </button>
                                        </div>
                                      </div>
                                    </Dropdown.Item>
                                  </Dropdown.Menu>
                                </Dropdown>
                              </li>
                              <li>
                                <Dropdown
                                  className="profile down"
                                  onClick={() => router.push('/user/profile')}
                                >
                                  <Dropdown.Toggle id="dropdown-autoclose-inside">
                                    <img src={`${session?.user?.image?.mediaUrl}`} alt="" />
                                    <span>{session?.user?.name}</span>
                                  </Dropdown.Toggle>
                                </Dropdown>
                              </li>
                            </ul>
                          </div>
                        </Col>
                      </Row>
                    </>
                  </>
                ) : (
                  <>
                    <div className="droplist">
                      <ul>
                        <li>
                          <Dropdown className="notification dropdown" align="end">
                            <Dropdown.Toggle id="dropdown-autoclose-inside">
                              <Image src={'/images/sidbar-icon/notification.svg'} alt="" />
                            </Dropdown.Toggle>
                            <Dropdown.Menu>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down ">
                                  <div className="notice">
                                    <h3>Notification</h3>
                                    <button type="button" className="btn note">
                                      +5
                                    </button>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="view-btn">
                                    <button type="button" className="w-100 btn">
                                      View All
                                    </button>
                                  </div>
                                </div>
                              </Dropdown.Item>
                            </Dropdown.Menu>
                          </Dropdown>
                        </li>
                        <li>
                          <Dropdown
                            className="profile down"
                            onClick={() => router.push('/user/profile')}
                          >
                            <Dropdown.Toggle id="dropdown-autoclose-inside">
                              <img src={`${session?.user?.image?.mediaUrl}`} alt="" />
                              <span>{session?.user?.name}</span>
                            </Dropdown.Toggle>
                          </Dropdown>
                        </li>
                      </ul>
                    </div>
                  </>
                )}
              </>
            )}
            {type === `organizer` && (
              <>
                <Row>
                  <Col xs="7" sm="6">
                    <div className="d-flex topbar">
                      <Button variant="toggle" className="me-2" onClick={toggleShow}>
                        <i className="icon-menu"></i>
                      </Button>
                      <div className="top-heading">
                        <h4>Welcome {session?.user?.name}</h4>
                      </div>
                    </div>
                  </Col>
                  <Col xs="5" sm="6" className="">
                    <div className="droplist">
                      <ul>
                        <li>
                          <Dropdown className="notification dropdown" align="end">
                            <Dropdown.Toggle id="dropdown-autoclose-inside">
                              <Image src={'/images/sidbar-icon/notification.svg'} alt="" />
                            </Dropdown.Toggle>
                            <Dropdown.Menu>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down ">
                                  <div className="notice">
                                    <h3>Notification</h3>
                                    <button type="button" className="btn note">
                                      +5
                                    </button>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="view-btn">
                                    <button type="button" className="w-100 btn">
                                      View All
                                    </button>
                                  </div>
                                </div>
                              </Dropdown.Item>
                            </Dropdown.Menu>
                          </Dropdown>
                        </li>
                        <li>
                          <Dropdown
                            className="profile down"
                            onClick={() => router.push('/organizer/organizer-profile')}
                          >
                            <Dropdown.Toggle id="dropdown-autoclose-inside">
                              <img src={`${session?.user?.image?.mediaUrl}`} alt="" />
                              <span>{session?.user?.name}</span>
                            </Dropdown.Toggle>
                          </Dropdown>
                        </li>
                      </ul>
                    </div>
                  </Col>
                </Row>
              </>
            )}
            {type === `admin` && (
              <>
                <Row>
                  <Col xs="7" sm="6">
                    <div className="d-flex topbar">
                      <Button variant="toggle" className="me-2" onClick={toggleShow}>
                        <i className="icon-menu"></i>
                      </Button>
                      <div className="top-heading">
                        <h4>Welcome Johne</h4>
                      </div>
                    </div>
                  </Col>
                  <Col xs="5" sm="6" className="">
                    <div className="droplist">
                      <ul>
                        <li>
                          <Dropdown className="notification dropdown" align="end">
                            <Dropdown.Toggle id="dropdown-autoclose-inside">
                              <Image src={'/images/sidbar-icon/notification.svg'} alt="" />
                            </Dropdown.Toggle>
                            <Dropdown.Menu>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down ">
                                  <div className="notice">
                                    <h3>Notification</h3>
                                    <button type="button" className="btn note">
                                      +5
                                    </button>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="notify-1">
                                    <span>
                                      <p className="mb-0 fs-14">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                      </p>
                                    </span>
                                  </div>
                                </div>
                              </Dropdown.Item>
                              <Dropdown.Item href="#" className="border-bottom">
                                <div className="drop-down">
                                  <div className="view-btn">
                                    <button type="button" className="w-100 btn">
                                      View All
                                    </button>
                                  </div>
                                </div>
                              </Dropdown.Item>
                            </Dropdown.Menu>
                          </Dropdown>
                        </li>
                        <li>
                          <Dropdown
                            className="profile down"
                            onClick={() => router.push('/admin/profile')}
                          >
                            <Dropdown.Toggle id="dropdown-autoclose-inside">
                              <img src="/images/Ellipse-(4).png" alt="" />
                              <span>John</span>
                            </Dropdown.Toggle>
                          </Dropdown>
                        </li>
                      </ul>
                    </div>
                  </Col>
                </Row>
              </>
            )}
            {type === `guest` && (
              <>
                <Row>
                  <Col xs="7" sm="6">
                    <div className="topbar">
                      <Button variant="toggle" className="me-2" onClick={toggleShow}>
                        <i className="icon-menu"></i>
                      </Button>
                      <div className="top-heading">
                        <h4>Welcome Johne</h4>
                      </div>
                      <div className="guest-btn">
                        {/* <button
                          type="button"
                          className="btn btn-primary payment"
                          onClick={() => router.push("/login")}
                        >
                          Login
                        </button> */}
                        <button
                          type="button"
                          className="btn btn-primary w-100 gift-cart"
                          onClick={() => router.push('/auth/signup')}
                        >
                          Sign Up
                        </button>
                      </div>
                    </div>
                  </Col>
                  <Col xs="5" sm="6" className="">
                    <div className="droplist">
                      <div className="form-group mb-0 w-100">
                        <div className="icon-field search">
                          <img
                            src={'/images/sidbar-icon/Search.svg'}
                            className="magnifire"
                            alt=""
                          />
                          <input
                            type="text"
                            className="form-control"
                            placeholder="Search..."
                            onClick={() => router.push('#')}
                          />
                          {router.pathname === `/guest/guest-dashboard/comment` ? (
                            <div className="filter-down">
                              <Dropdown className="notification dropdown" align="end">
                                <Dropdown.Toggle id="dropdown-autoclose-inside">
                                  <Image src={'/images/sidbar-icon/search-click.svg'} alt="" />
                                </Dropdown.Toggle>
                                <Dropdown.Menu>
                                  <Dropdown.Item href="#" className="border-bottom">
                                    <div className="drop-down">
                                      <div className="notice">
                                        <h3>Categories</h3>
                                        <h3>Popular</h3>
                                      </div>
                                    </div>
                                  </Dropdown.Item>
                                  <Dropdown.Item href="#" className="">
                                    <div className="drop-down">
                                      <div className="filer">
                                        <Link href="#">Category 1</Link>
                                        <Link href="#">Category 1</Link>
                                      </div>
                                    </div>
                                  </Dropdown.Item>
                                  <Dropdown.Item href="#" className="">
                                    <div className="drop-down">
                                      <div className="filer">
                                        <Link href="#">Category 1</Link>
                                        <Link href="#">Category 1</Link>
                                      </div>
                                    </div>
                                  </Dropdown.Item>
                                  <Dropdown.Item href="#" className="">
                                    <div className="drop-down">
                                      <div className="filer">
                                        <Link href="#">Category 1</Link>
                                        <Link href="#">Category 1</Link>
                                      </div>
                                    </div>
                                  </Dropdown.Item>
                                  <Dropdown.Item href="#" className="border-bottom">
                                    <div className="drop-down">
                                      <div className="filer">
                                        <Link href="#">Category 1</Link>
                                        <Link href="#">Category 1</Link>
                                      </div>
                                    </div>
                                  </Dropdown.Item>
                                  <Dropdown.Item href="#" className="border-bottom">
                                    <div className="drop-down">
                                      <div className="filer">
                                        <Link href="#">Category 1</Link>
                                        <Link href="#">Category 1</Link>
                                      </div>
                                    </div>
                                  </Dropdown.Item>
                                  <Dropdown.Item href="#" className="">
                                    <div className="drop-down">
                                      <button className="w-100 btn-search">Search</button>
                                    </div>
                                  </Dropdown.Item>
                                </Dropdown.Menu>
                              </Dropdown>
                            </div>
                          ) : (
                            <div className="filter-down">
                              <Dropdown className="notification dropdown" align="end">
                                <Dropdown.Toggle id="dropdown-autoclose-inside">
                                  <Image
                                    src={'/images/sidbar-icon/search-click.svg'}
                                    alt=""
                                    onClick={() => router.push('/guest/guest-dashboard/filter')}
                                  />
                                </Dropdown.Toggle>
                              </Dropdown>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
              </>
            )}
          </header>
          <section className={style.scroll_content}>{children}</section>
        </main>
        <Logout show={modalShowLogout} onHide={() => setModalShowLogout(false)} />
      </section>
    </>
  );
}

// Filter Modal //
// function Fitler(props: any) {
//   const options_11 = [
//     { value: "Los Angeles", label: "Los Angeles" },
//     { value: "Alaska", label: "Alaska" },
//   ];

//   const options_12 = [
//     { value: "California", label: "California" },
//     { value: "Washington", label: "Washington" },
//   ];

//   const options_13 = [
//     {
//       value: "3271 Chasen Dr Shingle Springs, California(CA), 95682",
//       label: "3271 Chasen Dr Shingle Springs, California(CA), 95682",
//     },
//     {
//       value: "3271 Chasen Dr Shingle Springs, California(CA), 95682",
//       label: "3271 Chasen Dr Shingle Springs, California(CA), 95682",
//     },
//   ];

//   const styling = {
//     control: (provided: any) => ({
//       ...provided,
//       borderRadius: "16px",
//       background: "#fff0",
//       // padding: "10px 0",
//       border: "none",
//       outline: "none",

//       // boxShadow: "6px 8px 24px 0px rgba(115, 115, 115, 0.16)",
//       // fontSize: "16px", // Adjust the font size as needed
//       "@media (max-width: 768px)": {
//         width: "100%",
//         marginLeft: "0",
//         fontSize: "14px", // Adjust the font size for smaller screens
//       },
//     }),
//     indicatorSeparator: () => ({ display: "none" }),
//   };

//   const [selectedOption_11, setSelectedOption_11] = useState<any>(null);
//   const [selectedOption_12, setSelectedOption_12] = useState<any>(null);
//   const [selectedOption_13, setSelectedOption_13] = useState<any>(null);

//   return (
//     <Modal
//       {...props}
//       size="md"
//       aria-labelledby="contained-modal-title-vcenter"
//       centered
//       className="filter-modal"
//     >
//       <Modal.Header closeButton></Modal.Header>

//       <Modal.Body>
//         <h4 className="text-center mb-4 modal-title">Filter</h4>
//         <div className="form-group">
//           <label htmlFor="">Age range</label>
//           <RangeSlider />
//         </div>
//         <div className="form-group">
//           <label htmlFor="">Search By City</label>
//           <Select
//             placeholder="City"
//             defaultValue={selectedOption_11}
//             onChange={setSelectedOption_11}
//             options={options_11}
//             styles={styling}
//           />
//         </div>
//         <div className="form-group">
//           <label htmlFor="">Search By State</label>
//           <Select
//             placeholder="Sates"
//             defaultValue={selectedOption_12}
//             onChange={setSelectedOption_12}
//             options={options_12}
//             styles={styling}
//           />
//         </div>
//         <div className="form-group">
//           <label htmlFor="">Specific Location</label>
//           <Select
//             placeholder="Locations"
//             defaultValue={selectedOption_13}
//             onChange={setSelectedOption_13}
//             options={options_13}
//             styles={styling}
//           />
//         </div>
//         <Button className="w-100">APPLY FILTER</Button>
//       </Modal.Body>
//     </Modal>
//   );
// }

// Logout Modal

function Logout(props: any) {
  const [chat, setChat] = useState(true);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header></Modal.Header>

      <Modal.Body>
        <div className="report">
          <h2 className="text-center heading mb-3 mt-2">Logout</h2>
          <h5 className="text-dark">Are you Sure you Want to logout</h5>
          <div className="card-btn">
            <button
              type="button"
              className="w-50 btn btn-primary mt-3 payment"
              onClick={() => router.reload()}
            >
              No
            </button>
            <button
              type="button"
              className="w-50 btn btn-primary mt-3 gift-cart"
              onClick={() => signOut({ callbackUrl: '/' })}
            >
              Logout
            </button>
          </div>
        </div>
      </Modal.Body>
    </Modal>
  );
}