import { Component, h, useProp } from "atomico";
import { Maybe } from "purify-ts/es/Maybe";
import { GlobalConfig } from "@caedman/gs/dist/aync-hook";
import style from "./kun-simple-header.scss";
import "../kun-avatar-dropdown/kun-avatar-dropdown";
import "../kun-icon/kun-icon";
import { getComponentOrDefine, redirect } from "../../hooks/aync-hook/redirect";
import { KunMenuItem } from "../kun-avatar-dropdown/menu";
import { convertEmptyString } from "../../common/utils";
import { getKunImageUrl } from "../kun-chat-message/kun-chat-message";
import { ROUTES } from "../../common/routes";

const menus: KunMenuItem[] = [{
  content: "我的资料",
  href: ROUTES.ProfileAvatar,
},
{
  content: "我的学习",
  href: ROUTES.LearningPlan,
},
{
  content: "创作中心",
  href: ROUTES.MyCreatedSeries,
},
{
  content: "帮助文档",
  href: ROUTES.HelpDocs,
},
];

const KunSimpleHeader: Component = () => {
  const [hasMenu] = useProp<boolean>("hasMenu");
  const [maxWidht] = useProp<boolean>("maxWidth");
  const click2Home = (): void => {
    redirect("/web/plume/moment");
  };
  const click2Message = (): void => {
    redirect(ROUTES.Messages);
  };

  const defaultAvatar = "https://img13.360buyimg.com/n7/18448/2e13ced5-2e14-4c3a-b83e-8ae02c97c0aa.jpg";
  const avatar = Maybe.fromNullable(convertEmptyString(localStorage.getItem("userAvatar"))).map(getKunImageUrl).orDefault(defaultAvatar);

  const style1 = `
  .header-page {
    max-width: ${maxWidht ?? GlobalConfig.maxWidth}px;
  }
  ${style}
`;

  return (
    <host>
      <style>{style1}</style>
      <div className="fixed-header">
        <div className="centered header-page ">
          <div className="navigator">
            <div className="logo" onclick={click2Home} role="presentation">
              <kun-icon iconType="logo" class="header-img-logo" iconWidth={100} iconHeight={100} />
            </div>
          </div>

          {
            hasMenu && (
            <div className="right-handler">
              <div className="icon-with-name" onclick={click2Message}>
                <div className="header-message-icon icon" />
                消息
              </div>
              <kun-avatar-dropdown seek-menus={menus} seek-avatar={avatar} />
            </div>
            )
          }
        </div>
      </div>
    </host>
  );
};

KunSimpleHeader.props = {
  maxWidth: {
    type: Number,
    reflect: true,
  },
  hasMenu: {
    type: Boolean,
    value: true,
    reflect: true,
  },
  message: {
    type: String,
    value: "kun-simple-header",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-simple-header", KunSimpleHeader);
