import { Component, h, useProp } from "atomico";
import { Option } from "funfix";
import style from "./kun-avatar-dropdown.scss";
import { useHoverHook } from "../../hooks/aync-hook/aync-hook";
import { getComponentOrDefine, redirect } from "../../hooks/aync-hook/redirect";
import "../kun-image/kun-image";
import { KunMenuItem } from "./menu";

export const KunAvatarDropdown: Component = (props) => {
  const [hoverRef, isHovered] = useHoverHook();
  const [menus] = useProp<KunMenuItem[]>("seekMenus");

  const checkedMenus = Option.of(menus).getOrElse([]);

  const handleClick = (href: string): void => {
    if (href) {
      // redirect(href);
      redirect(href);
    }
  };

  return (
    <host>
      <style>{style}</style>
      <div className="btn-hover" ref={hoverRef}>
        <div className="arrow-dropdown">
          <div class="inline-flex w-10 h-10">
            {
              props.seekAvatar != null && (
              <kun-image cls="kun-image-avatar" className="kun-avatar-dropdown" width={40} height={40} url={props.seekAvatar || "https://file.wintercoming.xyz/d6c850c6-13f5-408a-ba3c-fb3b4ef631c3.jpeg"} />
              )
            }
            {
              props.seekAvatar == null && (
              <kun-icon iconType="logo" iconHeight={40} iconWidth={40} />
              )
            }
          </div>

          <div className="arrow down" />
          {
              isHovered && (
              <div className="overlay-dropdown kun-avatar-bubble flex flex-col">
                  {
                        (checkedMenus).map((r) => (
                          <div className="hover:bg-gray-200 cursor-pointer py-2 px-2 hover-menu" onclick={() => handleClick(r.href)} role="presentation">
                            <div className={`icon icon-${r.icon}`} />
                            <div className="link">{r.content}</div>
                          </div>
                        ))
                 }
              </div>
              )
            }
        </div>
      </div>

    </host>
  );
};

KunAvatarDropdown.props = {
  seekMenus: {
    type: Array,
    value: [
      {
        content: "ok",
      },
      {
        content: "ok2",
      },
    ],
  },
  seekAvatar: {
    type: String,
    value: undefined,
  },
};

export default getComponentOrDefine("kun-avatar-dropdown", KunAvatarDropdown);
