import React from "react";
import { getComment } from "@services/comment";
import { CommentContext, DefaultValue } from "./context";
import CommentList from "./CommentList";
import styles from "./index.less";

export class CommentCombine extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      ...DefaultValue,
      locale: props.locale || "zh",
      currentUser: props.currentUser || null,
    };
  }

  static getDerivedStateFromProps(props, state) {
    return {
      locale: props.locale,
      currentUser: props.currentUser,
    };
  }

  render() {
    return (
      <CommentContext.Provider value={this.state}>
        <Comment />
      </CommentContext.Provider>
    );
  }
}

export class Comment extends React.PureComponent {
  static contextType = CommentContext;
  static propTypes = {};
  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      comment_data: null,
    };
  }

  componentDidMount = async () => {
    const { type, limit, page, bussiness_id } = this.context;
    const res = await getComment({
      type,
      limit,
      page,
      businessId: bussiness_id,
    });
    console.log("res:", res);
    this.setState({
      comment_data: res,
    });
  };

  renderCommentList = (list) => {
    // content: "[e101][e102]"
    // created: 1582352617
    // favor_count: 0
    // favored: false
    // id: "5e50c8e9818eda000192773d"
    // is_speak: false
    // medias: null
    // replies: []
    // reply_count: 0
    // user_avatar: "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2020/2/7/1326acc4b1609c8ecf52e94d58a38384.jpg?x-oss-process=image/resize,h_100"
    // user_id: 71770
    // user_name: "EvoKou"
    return (
      <CommentList
        list={list}
        onChangeListItem={({ commentId, changeProp }) => {
          const newList = list.map(i => {
            if (i.id === commentId) {
              return {
                ...i,
                ...changeProp,
              };
            }
            return i;
          });
          this.setState({
            comment_data: {
              ...this.state.comment_data,
              list: newList,
            }
          })
        }}
        topDivider
      />
    );
  };

  renderComment = () => {
    const { comment_data } = this.state;
    if (comment_data === null) return "数据载入中";
    const { list, total, page } = comment_data;
    return (
      <div>
        total: {total}
        page: {page}
        <div>{this.renderCommentList(list)}</div>
      </div>
    );
  };

  render() {
    console.log("context", this.context);
    return (
      <div>
        {JSON.stringify(this.context)}
        {this.renderComment()}
      </div>
    );
  }
}

export default CommentCombine;