import { useState, useEffect } from "react";
import { UserProfile } from "../../../types/notifications";
import classNames from "../../../utils/helpers/className";
import MobileCombo from "../search";

const MobileSearch = ({
  props,
  profile,
}: {
  profile?: UserProfile;
  props: {
    handleClick: (e: any) => void;
    searchTab: boolean;
    opened: boolean;
    setSearchTab: (e: any) => void;
  };
}) => {
  const [userProfile, setUserProfile] = useState<UserProfile | undefined>(
    undefined
  );
  useEffect(() => {
    console.log("fuck you", profile);
    if (profile !== undefined) {
      console.log("setting profile mSea", profile);
      const account = profile;
      setUserProfile(account);
    }
  }, [profile]);
  console.log(userProfile, "userProfile in mobileSearch");
  return (
    <div>
      <button
        onClick={props.handleClick}
        className={classNames(
          props.searchTab ? "hidden" : "flex",
          "bg-transparent fill-white p-2"
        )}
      >
        <div className=" flex  flex-col items-center justify-center pl-0.5 2xs:max-sm:items-end 2xs:max-sm:bg-transparent">
          <svg
            aria-hidden="true"
            focusable="false"
            data-icon="search"
            className={classNames(
              "bg-transparent",
              " h-auto rounded-r-md border border-transparent   py-1 px-1 2xs:max-lg:w-[3.05vw] 2xs:max-sm:w-[6.15vw] 2xs:max-sm:bg-transparent lg:w-10"
            )}
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
          >
            <path
              fill="currentColor"
              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
            ></path>
          </svg>
        </div>
      </button>
      {profile && (
        <MobileCombo
          opened={props.opened}
          search={props.setSearchTab}
          profile={userProfile}
          props={props}
        />
      )}
      {!profile && (
        <MobileCombo
          opened={props.opened}
          search={props.setSearchTab}
          props={props}
        />
      )}
    </div>
  );
};
export default MobileSearch;