import React, { useEffect, useState } from "react";
import TwitchBar from "../components/navbar/navbarParent";
import Navbar from "../components/navbar/navbarParent";
import { UserProfile } from "../types/notifications";
import { profileSim } from "../utils/helpers/user";
import SuggestedStreamers from "../components/suggestedStreamer";
import CategoryCards from "../components/cards/categoryCards";
import MobileCombo from "../components/mobile/search";
import classNames from "../utils/helpers/className";
const Mobile = ({}) => {
  const [searchTab, setSearchTab] = useState(false);
  const [opened, setOpened] = useState(false);
  const [browseTab, setBrowseTab] = useState(false);
  const [profile, setProfile] = useState<UserProfile | undefined>(undefined);
  const handleClick = (e: any) => {
    // e.preventDefault();
    console.log("The link was clicked.");
    setSearchTab((prev) => !prev);
  };
  // const handleBrowse = (e: any) => {
  //   // e.preventDefault();
  //   console.log("The link was clicked.");
  //   setBrowseTab((prev) => !prev);
  // };
  useEffect(() => {
    if (profile === undefined) {
      const account = profileSim();
      console.log("setting profile mobile", account);
      setProfile(account);
    }
  }, [profile]);
  useEffect(() => {
    console.log(searchTab);
    if (searchTab) {
      setOpened(true);
    } else {
      setOpened(false);
    }
  }, [searchTab]);
  const mobileSearchProps = {
    opened: opened,
    handleClick: handleClick,
    searchTab: searchTab,
    setSearchTab: setSearchTab,
  };
  if (browseTab == false) {
    return (
      <div className="flex min-h-screen w-full flex-col bg-[#0e0e10]">
        <div>
          <Navbar
            profile={profile}
            mobile={true}
            search={false}
            customCombo={true}
            props={mobileSearchProps}
            mobileBrowse={setBrowseTab}
          />
        </div>
        <div className="pl-2 pt-6 pb-0 text-2xl text-[4vw] font-bold">
          <a>Welcome to Twitch!</a>
        </div>
        <SuggestedStreamers newExpand={false} mobile={true} />
        <div className="h-[18rem]">
          <CategoryCards newExpand={false} mobile={true} />
        </div>
      </div>
    );
  } else {
    return (
      <div className="flex min-h-screen w-full flex-col bg-[#0e0e10]">
        <div>
          <Navbar
            profile={profile}
            mobile={true}
            search={false}
            customCombo={true}
            props={mobileSearchProps}
          />
        </div>
        {/* category card mobile section */}
        <CategoryCards newExpand={false} mobilePage={true} />
      </div>
    );
  }
  // return (
  //   <div className="flex min-h-screen w-full flex-col bg-[#0e0e10]">
  //     <div>
  //       <Navbar
  //         profile={profile}
  //         mobile={true}
  //         search={false}
  //         customCombo={true}
  //         props={mobileSearchProps}
  //       />
  //     </div>
  //     <div className="pl-2 pt-6 pb-0 text-2xl text-[4vw] font-bold">
  //       <a>Welcome to Twitch!</a>
  //     </div>
  //     <SuggestedStreamers newExpand={false} mobile={true} />
  //     <div className="h-[18rem]">
  //       <CategoryCards newExpand={false} mobile={true} />
  //     </div>
  //   </div>
  // );
};

export default Mobile;