import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Popconfirm, Tag } from "antd";
import { getImageUrl } from "educoder";
import "./merge.css";

class MergeItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //显示 隐藏
      isdisplay: false,
      orderid: "",
    };
  }

  onMouseMove = (type) => {
    this.setState({
      isdisplay: true,
      orderid: type,
    });
  };

  onMouseOut = () => {
    this.setState({
      isdisplay: false,
    });
  };

  set_issue_tags = (issue_tags) => {
    if (issue_tags && issue_tags.length > 0) {
      return issue_tags.map((item, key) => {
        return (
          <span className="issue-tag-show" style={{ color: item.color }}>
            {item.name}
          </span>
        );
      });
    } else {
      return "--";
    }
  };

  render() {
    const { issues, project_name, project_author_name } = this.props;
    const { projectsId , owner } = this.props.match.params;
    const { current_user } = this.props;
    const renderList = () => {
      if (issues && issues.length > 0) {
        return issues.map((item, key) => {
          return (
            <div className="issueItem">
              <div className="flex-1">
                <p className="mb15 df" style={{ alignItems: "center" }}>
                  <Link
                    to={`/projects/${owner}/${projectsId}/pulls/${item.pull_request_id}/Messagecount`}
                    className="hide-1 font-15 color-grey-3 fwb lineh-30 mr10"
                    style={{ maxWidth: "300px" }}
                  >
                    {item.name}
                  </Link>
                  <Tag className={`pr_tags_${item.pull_request_staus}`}>
                    {item.pull_request_staus === "merged"
                      ? "已合并"
                      : item.pull_request_staus === "closed"
                      ? "已拒绝"
                      : "开启的"}
                  </Tag>
                </p>
                <p className="grid-item font-13">
                  <Link
                    to={`/users/${item && item.author_login}`}
                    className="show-user-link"
                  >
                    <img
                      className="radius"
                      src={getImageUrl(`images/${item && item.avatar_url}`)}
                      alt=""
                      width="24"
                      height="24"
                    />
                  </Link>
                  <span>
                    <Link
                      to={`/users/${item && item.author_login}`}
                      className="show-user-link color-grey-8 ml5"
                    >
                      {item && item.author_name}
                    </Link>
                    <span className="ml15 color-grey-8">
                      {item.pull_request_staus === "open"
                        ? "创建于"
                        : item.pull_request_staus === "merged"
                        ? "合并于"
                        : "更新于"}
                    </span>
                    <span className="color-grey-8">{item.pr_time}</span>
                    <span className="ml15">
                      <Tag className="pr-branch-tag">
                        <Link
                          to={`/projects/${item.is_original ? item.fork_project_user : owner}/${ item.is_original ? item.fork_project_identifier : projectsId }?branch=${item.pull_request_head}`}
                          className="maxW200px hide-1 ver-middle"
                        >
                          {item.is_original
                            ? item.fork_project_user
                            : project_author_name}
                          :{item.pull_request_head}
                        </Link>
                      </Tag>
                      <span className="mr8 ver-middle">
                        <i
                          className={
                            "iconfont icon-youjiang color-grey-c font-16"
                          }
                        ></i>
                      </span>
                      <Tag className="pr-branch-tag">
                        <Link
                          to={`/projects/${owner}/${projectsId}?branch=${item.pull_request_base}`}
                          className="maxW200px hide-1 ver-middle"
                        >
                          {/* {item.is_fork ? item.pull_request_base : `${item.author_name}:${item.pull_request_base}`} */}
                          {project_author_name}:{item.pull_request_base}
                        </Link>
                      </Tag>
                    </span>
                  </span>
                </p>
              </div>
              <ul
                className="topWrapper_select no-cursor"
                onMouseMove={() => this.onMouseMove(item.id)}
                onMouseOut={() => this.onMouseOut()}
              >
                <li>{item.priority}</li>
                <li>{this.set_issue_tags(item.issue_tags)}</li>
                <li>
                  {item.assign_user_name ? (
                    <Link
                      to={`/users/${item.assign_user_login}`}
                      className="show-user-link"
                    >
                      {item.assign_user_name}
                    </Link>
                  ) : (
                    "--"
                  )}
                </li>
                <li>{item.version || "--"}</li>

                <li>
                  <div
                    className="flex1 df"
                    style={{ justifyContent: "center" }}
                  >
                    {item.journals_count ? (
                      <Link
                        className="mr5 color-grey-8"
                        to={`/projects/${owner}/${projectsId}/pulls/${item.pull_request_id}/Messagecount`}
                      >
                        <i className="iconfont icon-huifu1 font-15 mr5 ver-middle"></i>
                        {item.journals_count}
                      </Link>
                    ) : (
                      ""
                    )}
                    {current_user && current_user.login ? (
                      <div
                        className="milepostleft"
                        style={{
                          display:
                            this.state.orderid === item.id &&
                            this.state.isdisplay
                              ? "flex"
                              : "none",
                        }}
                      >
                        <div className="grid-item mr15 color-grey-9">
                          <Link
                            to={`/projects/${owner}/${projectsId}/merge/${item.pull_request_id}/updatemerge`}
                            className="color-grey-9"
                          >
                            <i className="iconfont icon-bianji3 font-14 mr5"></i>
                          </Link>
                        </div>
                      </div>
                    ) : (
                      ""
                    )}
                  </div>
                </li>
              </ul>
            </div>
          );
        });
      }
    };
    return <div>{renderList()}</div>;
  }
}

export default MergeItem;
