import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
import { Follow, UserProfile } from "../../../types/notifications";
import classNames from "../../../utils/helpers/className";
import FollowSideSvg from "../../buttons/followSideButton";
import TooltipRight from "../../../utils/helpers/tooltipRight";
import SideSuggestSvg from "../../buttons/sideSuggest";
import SideExpand from "../../buttons/sideExpand";
import { simRecommended } from "../../../utils/helpers/user";
import Image from "next/legacy/image";
import FollowArrows from "../../buttons/followSideArrows";
import { signIn } from "next-auth/react";
// import { circle } from "@heroicons/react/20/solid";
const Sidebar = ({
  user,
  expand,
  setExpand,
}: //width,
{
  user: UserProfile | undefined;
  expand: boolean;
  setExpand: Dispatch<SetStateAction<boolean>>;
  //width?: number | undefined;
}) => {
  const [profile, setProfile] = useState<UserProfile | undefined>(user);
  // const [expand, setExpand] = useState(false);
  const [width, setWidth] = useState<number | undefined>(0);
  useEffect(() => {
    if (typeof window !== undefined) {
      console.log("resize effect");
      const handleResize = () => {
        setWidth(window.innerWidth);
      };
      window.addEventListener("resize", handleResize);

      return () => {
        window.removeEventListener("resize", handleResize);
      };
    }
  });
  const handleExpand = (e: any) => {
    console.log("expand sidebar", expand);
    setExpand(!expand);
  };
  useEffect(() => {
    if (width && width < 1280) {
      setExpand(false);
    }
  }, [width]);

  useEffect(() => {
    if (user !== undefined || user !== profile) {
      return setProfile(user);
    }
  }, [user]);
  const handleLogin = async (e: React.MouseEvent<HTMLDivElement>) => {
    e.preventDefault();
    console.log("logging in");
    await signIn("google");
  };

  if (profile == undefined)
    return (
      <div
        role="button"
        //@ts-ignore //eslint-disable-next-line
        onClick={() => {
          handleLogin;
        }}
        className="rounded-md bg-white text-black"
      >
        Log In
      </div>
    );

  if (typeof width !== undefined) {
    return (
      <div
        className={classNames(
          expand ? "w-[12rem]" : "w-[2.1rem] md:w-[2.2rem] 2xl:w-[2.4rem]",
          "flex flex-col items-center"
        )}
      >
        <div></div>
        <div
          role="button"
          className={classNames(
            expand
              ? "w-full flex-row justify-around"
              : "flex-col justify-center",
            " hover:border-1  hover: hidden grow cursor-pointer  items-center bg-[#1E1E20]    p-1 hover:rounded-md lg:flex  lg:items-center lg:justify-center"
          )}
          onClick={handleExpand}
        >
          <div
            className={classNames(
              expand ? "flex w-full grow whitespace-nowrap" : "hidden",
              ""
            )}
          >
            <a className="flex w-full grow">For You</a>
          </div>
          <div className="flex">
            <TooltipRight text={<SideExpand />} tip={"Expand"} opened={false} />
          </div>
        </div>
        <div className="flex h-full w-full flex-col items-start justify-center px-1  ">
          {expand == true ? (
            <div className="flex w-full grow">
              <div
                className={classNames(
                  expand
                    ? "flex w-full grow flex-col whitespace-nowrap"
                    : "hidden",
                  ""
                )}
              >
                <div className="text-sm font-bold">FOLLOWED CHANNELS</div>
                <div className="text-xs ">Viewers (High to Low)</div>
              </div>
              <FollowArrows />
            </div>
          ) : (
            <TooltipRight
              text={<FollowSideSvg widthT={width} />}
              tip={"Following"}
              opened={false}
            />
          )}
          {width}
        </div>
        {profile.following &&
          profile.following.map((item: Follow, index) => {
            return (
              <div
                key={`followed-${index}`}
                className={classNames(
                  expand ? "pl-[0.188rem]" : "pl-0",
                  "flex w-full items-start justify-center"
                )}
              >
                <img
                  className=" m-1 w-[1.55rem] rounded-full 2xl:w-[1.35rem]"
                  src={item.pic}
                  alt=""
                ></img>
                {expand && (
                  <div className="flex h-full w-full flex-col justify-center">
                    <div className="flex w-full flex-col items-center justify-between">
                      <div className="flex h-full w-full items-center justify-between pl-2 text-xs">
                        <div className="text-white">{item.name}</div>
                        <div>
                          {item.live == true && (
                            <div className="flex gap-1">
                              <div className="flex flex-col items-center justify-center">
                                <div className="h-1 w-2 rounded-full bg-red-600 py-1 "></div>
                              </div>
                              <div className="text-[#dedee3]">
                                {item.viewers}
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                      <div className="flex w-full items-center justify-start pl-2 text-xs text-gray-500 ">
                        <a className="text-[#adadb8]">
                          {item.live == true
                            ? `${item.category || ""}`
                            : `offline`}
                        </a>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        {!profile.following && <div>sign in </div>}
        <div className="my-1 flex h-full w-full flex-col items-start justify-center pt-1 ">
          {expand == true ? (
            <div>
              <a className="text-sm">Recommended Channels</a>
            </div>
          ) : (
            <TooltipRight
              text={<SideSuggestSvg />}
              tip={"Suggested"}
              opened={false}
            />
          )}
          {simRecommended.map((item) => {
            return (
              <>
                <div>
                  <Image src={`${item.pic}`} width={25} height={25} />
                </div>
              </>
            );
          })}
          {/* <SideSuggestSvg /> */}
        </div>
      </div>
    );
  }
  return <div>loading</div>;
};

export default Sidebar;