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

const KunSeriesAuthorProfile: FunctionalComponent = (props) => {
  const ref = useRef();

  if (ref != null && ref.current != null) {
    (ref.current as HTMLInputElement).innerHTML = props.needleDescription || "OK";
  }

  return (
    <host shadowDom>
      <style>{style}</style>
      <div className="series-content" ref={ref} />

      <div className="section-title">简介</div>
      {
          props.needleDescription && (
          <div className="series-content" ref={ref} />
          )
        }
      <div className="section-title">主讲老师</div>
      <div className="flex-row">
        <deckgo-lazy-img
          className="avatar"
          deckgo-lazy-img-border-radius="50%"
          img-src={props.needleAvatar || "https://pic1.zhimg.com/54b1d8754321c3d42c67bc3e9ab0f3c2_m.jpg"}
        />
        <div className="flex-column author-description">
          <span className="author-name">{props.needleAuthorName}</span>
          <span className="author-location">
            <span className="location">{props.needleAuthorLocation || "暂未填写位置"}</span>
          </span>
        </div>
      </div>
      <div className="author-content">
        {props.needleContent}
      </div>
    </host>
  );
};

KunSeriesAuthorProfile.props = {
  needleAvatar: {
    type: String,
  },
  needleAvatarName: {
    type: String,
  },
  needleAuthorLocation: {
    type: String,
  },
  needleContent: {
    type: String,
  },
  needleDescription: {
    value: "<h1>dd</h1>",
    type: String,
    reflect: true,
    event: true,
  },
};

export default getComponentOrDefine("kun-series-author-profile", KunSeriesAuthorProfile);
