import { h, Component } from "atomico";
import style from "./kun-series-meta.css";
import "../kun-rating/kun-rating";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

export function KunSeriesMeta(props) {
  return (
    <host shadowDom>
      <style>{style}</style>

      <div className="series-item-container">
        <div className="series-item-left">
          <div className="series-img">
            <deckgo-lazy-img
              class="series-img"
              img-src={props.needleSeriesCover || "https://upload.jianshu.io/book/image/d6c850c6-13f5-408a-ba3c-fb3b4ef631c3?imageMogr2/auto-orient/strip|imageView2/1/w/214/h/286"}
            />
          </div>

          <div className="series-detail">
            <div className="series-title">
              {props.needleSeriesName}
            </div>
            <div className="star-rating">
              <kun-rating needlePercentage={props.needleStarScore} />
              <span className="count-num">
                {props.needleStarCount}
                人评价
              </span>
            </div>
            <div className="series-tags">
              {
                  (props.needleTags || []).map((r: string) => <span className="series-tag">{r}</span>)
                }
            </div>

            <span className="description">
              {props.needleCardCount}
              个卡片|
              {props.needleSubscriptionCount}
              已学
            </span>
          </div>
        </div>

        <div className="learn-plan-setting">
          <deckgo-lazy-img
            class="avatar"
            img-src={props.needleAuthorAvatar || "https://upload.jianshu.io/book/image/d6c850c6-13f5-408a-ba3c-fb3b4ef631c3?imageMogr2/auto-orient/strip|imageView2/1/w/214/h/286"}
          />
          {props.needleAuthorName}

          <span className="price">
            免费
          </span>

          <button className="subscribe-btn" type="button">
            订阅
          </button>
        </div>
      </div>
    </host>
  );
}

KunSeriesMeta.props = {
  needleSeriesName: {
    type: String,
  },
  needleAuthorName: {
    type: String,
  },
  needleSeriesType: {
    type: String,
  },
  needleSeriesId: {
    type: Number,
  },
  needleAuthorAvatar: {
    type: String,
  },
  needleStarScore: {
    type: Number,
  },
  needleStarCount: {
    type: String,
  },
  needleSeriesCover: {
    type: String,
  },
  needleCardCount: {
    type: Number,
  },
  needleSubscriptionCount: {
    type: Number,
  },
  needleTags: {
    type: Array,
  },
};

export default getComponentOrDefine("kun-series-meta", KunSeriesMeta);
