import { Component, h } from "atomico";
import { getComponentOrDefine, redirect } from "../../hooks/aync-hook/redirect";

import "../kun-button-puer/kun-button-puer";

const style = `
.profile-header {
 height: 305px;
 position: relative;
}

 .user-img {
      --deckgo-lazy-img-border-radius: 8px;
      --deckgo-lazy-img-height: 150px;
      --deckgo-lazy-img-width: 150px;
 }
 
 .img-header {
  height: 165px;
  width： 100%;
  background-image: url("https://file.wintercoming.xyz/1.jpg");
 }
 
 .action {
   color:rgba(153,153,153,1);
   line-height:25px;
   font-size: 18px;
 }
 
 .counts {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
 }
 
 .profile-name {
     display:flex;
     justify-content: flex-start;
 }

 .authorName {
    font-size: 32px;
    color:rgba(40,40,40,1);
    line-height:46px;
    margin-bottom: 10px;
 }
 
 .bottom-aligns {
  padding: 0 10px 20px 28px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
}

  .name-area {
    display: flex;
    margin-left: 34px;
    flex-direction: column;
    justify-content: flex-end;  
 }
 
 .num {
  color:rgba(40,40,40,1);
  line-height:35px;
  font-size: 25px;
 }
 
 .vd {
  width: 1px;
  margin-top: 5%;
  background-color: rgba(226, 226, 226, 1);
  height: 60%;
  margin: 0 25px;
 }

`;

/**
 * @param {object} props
 * @param {string} props.needleTitle
 *
 */
export function KunProfileHeader(props) {
  const goToEditProfile = (): void => {
    redirect("/web/plume/profile");
  };

  return (
    <host shadowDom>
      <style>{style}</style>
      <div className="profile-header">
        <div className="img-header" />

        <div className="bottom-aligns">
          <div className="profile-name">
            <deckgo-lazy-img
              className="user-img"
              img-src={props.seriesCover || "https://upload.jianshu.io/book/image/d6c850c6-13f5-408a-ba3c-fb3b4ef631c3?imageMogr2/auto-orient/strip|imageView2/1/w/214/h/286"}
            />

            <div className="name-area">
              <span className="authorName">{props.needleTitle}</span>

              <div className="counts">
                <div>
                  <span className="num">333</span>
                  <div className="action">关注</div>
                </div>

                <div className="vd" />

                <div>
                  <span className="num">333</span>
                  <div className="action">关注</div>
                </div>

                <div className="vd" />

                <div>
                  <span className="num">333</span>
                  <div className="action">专辑</div>
                </div>
              </div>

            </div>
          </div>
          <kun-button-puer needleContent="编辑个人资料" onclick={() => goToEditProfile()} />
        </div>
      </div>
    </host>
  );
}

KunProfileHeader.props = {
  needleTitle: {
    type: String,
    value: "kun-profile-header",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-profile-header", KunProfileHeader);
