import React, { useEffect } from "react";

/* This example requires Tailwind CSS v2.0+ */
import { Fragment, useState } from "react";
import { Dialog, Menu, Transition } from "@headlessui/react";
import { XCircleIcon, ChevronLeftIcon } from "@heroicons/react/20/solid";
import { SmallDots } from "../../buttons/SmallMore";
import classNames from "../../../utils/helpers/className";
import ComboBox from "../../navbar/comboBox";
import { UserProfile } from "../../../types/notifications";
import ComboTwo from "../../comboTwo";
const MobileCombo = ({
  opened,
  search,
  profile,
  props,
}: {
  props: {
    handleClick: (e: any) => void;
    searchTab: boolean;
    opened: boolean;
    setSearchTab: (e: any) => void;
  };
  profile?: UserProfile;
  search: React.Dispatch<React.SetStateAction<boolean>>;
  opened: boolean;
}) => {
  const [open, setOpen] = useState(false);
  const [userProfile, setUserProfile] = useState<UserProfile | undefined>(
    undefined
  );
  useEffect(() => {
    console.log("profile", profile);
    if (profile !== undefined) {
      console.log("setting profile mComb", profile);
      const account = profile;
      setUserProfile(account);
    }
  }, [profile]);

  useEffect(() => {
    if (opened == true) {
      setOpen(true);
    }
  }, [opened]);

  const handleOpen = () => {
    setOpen(false);
    search(false);
  };
  const handleClose = () => {
    setOpen(false);
    search(false);
  };
  console.log(profile, "profile in mobileCombo");
  return (
    <Transition.Root show={open} as={Fragment}>
      <Dialog
        as="div"
        className="fixed inset-0 z-[20] overflow-hidden "
        onClose={handleClose}
      >
        <div className="absolute inset-0 overflow-hidden">
          <Dialog.Overlay className="absolute inset-0" />

          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-4">
            <Transition.Child
              as={Fragment}
              enter="transform transition ease-in-out duration-500 sm:duration-700"
              enterFrom="translate-x-full"
              enterTo="translate-x-0"
              leave="transform transition ease-in-out duration-500 sm:duration-700"
              leaveFrom="translate-x-0"
              leaveTo="translate-x-full"
            >
              <div className="min-w-screen pointer-events-auto flex min-h-screen w-screen flex-col">
                <div className="flex min-h-screen grow flex-col overflow-y-scroll bg-[#0e0e10] shadow-xl">
                  <div className="h-[6.6%] px-1 py-2 sm:px-1">
                    <div className="flex h-full items-start justify-between">
                      <div
                        id="slide-over-heading"
                        className="flex h-full grow flex-row pr-4 text-lg font-medium text-gray-900"
                      >
                        {/* <a className="pr-4 text-white">icon</a> */}
                        <div className="flex flex-col items-center justify-center">
                          <button
                            autoFocus={false}
                            tabIndex={2}
                            type="button"
                            className="rounded-md bg-transparent text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500"
                            onClick={handleOpen}
                          >
                            <span className="sr-only">Close panel</span>
                            <ChevronLeftIcon className="h-[1.8rem] w-[3rem] fill-white pr-4" />
                            {/* <XCircleIcon className="h-6 w-6" aria-hidden="true" /> */}
                          </button>
                        </div>
                        <div className="w-full grow pl-2 text-white">
                          {/* <ComboTwo /> */}
                          <ComboBox
                            mobile={true}
                            search={true}
                            profile={userProfile}
                            props={props}
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  {/* Main */}
                  {/* <div className="h-full px-4">
                    <div className="h-full border border-solid border-black pb-1 sm:pb-6">
                      <a>place results</a>
                    </div>
                  </div> */}
                </div>
              </div>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
  );
};

export default MobileCombo;