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

export function KunListSeries(props) {
  // const ref = useHost();

  // const [state] = useState({
  //   needleInPlan: props.needleInPlan,
  //   needleDailyCount: props.needleDailyCount,
  // });

  // const chaneValue = (data) => {
  //   console.log("data", data);
  //   const r = data.detail.selectedOption;
  //   const newState = {
  //     ...state,
  //     needleDailyCount: parseInt(r.value, 10),
  //   };
  //   ref.current.dispatchEvent(new CustomEvent("handleChange", { detail: newState }));
  // };

  return (
    <host shadowDom>
      <style>{style}</style>

      <div className="series-item-container">
        <div className="series-item-left">
          <div className="series-img">
            <deckgo-lazy-img
              deckgo-lazy-img-border-radius="50%"
              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="series-needleTags">
              {
                  (props.needleTags || []).map((r) => <span className="series-tag">{r}</span>)
                }
            </div>

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

KunListSeries.props = {
  needleSeriesName: {
    type: String,
  },
  needleSeriesId: {
    type: Number,
  },
  needleSeriesCover: {
    type: String,
  },
  needleCardCount: {
    type: Number,
  },
  needleSubscriptionCount: {
    type: Number,
  },
};

export default getComponentOrDefine("kun-list-series", KunListSeries);
