import React, { Component } from "react";
import { Link } from "react-router-dom";
import {
  Input,
  AutoComplete,
  Dropdown,
  Menu,
  Icon,
  Spin,
  Pagination,
  Button,
  Table,
  Tooltip
} from "antd";
import NoneData from "../Nodata";
import axios from "axios";
import { getImageUrl } from "educoder";
import {WhiteBack} from '../Component/layout';

const { Search } = Input;

const { Option } = AutoComplete;
const MENU_LIST = [
  {
    id: "Manager",
    name: "管理员",
  },
  {
    id: "Developer",
    name: "开发者",
  },
  {
    id: "Reporter",
    name: "报告者",
  },
];
const LIMIT = 15;
class Collaborator extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: undefined,
      user: undefined,
      user_id: undefined,
      userDataSource: undefined,
      page: 1,
      total_count: undefined,
      isSpin: true,
      searchKey: undefined,
      search: undefined,
      role: undefined,
      otherSpin: false,
      searchSpin: false,
      roleName: undefined,
    };
  }
  componentDidUpdate=(prevPros)=>{
    if(prevPros && this.props && !this.props.checkIfLogin()){
      this.props.history.push("/403")
      return
    }
  }
  componentDidMount = () => {
    // this.check_is_login()
    if (this.props.project_id) {
      this.getMember();
    }
  };

  // check_is_login =() =>{
  //   if(!this.props.checkIfLogin()){
  //     this.props.history.push("/403")
  //     return
  //   }
  // };

  componentDidUpdate = (prevState) => {
    if (
      this.props.project_id &&
      this.props.project_id !== prevState.project_id
    ) {
      this.getMember();
    }
  };

  // 获取项目协作者
  getMember = () => {
    const { page, search, role } = this.state;
    const {projectsId ,owner} = this.props.match.params;
    const url = `/${owner}/${projectsId}/collaborators.json`;
    axios
      .get(url, {
        params: {
          page,
          search: search,
          role: role,
          limit: LIMIT,
        },
      })
      .then((result) => {
        if (result) {
          this.setState({
            listData: result.data.members,
            isSpin: false,
            otherSpin: false,
            searchSpin: false,
            total_count: result.data.total_count,
          });
        }
      })
      .catch((error) => {
        this.setState({
          isSpin: false,
          otherSpin: false,
          searchSpin: false,
        });
        console.log(error);
      });
  };
  // 输入用户
  changeInputUser = (e) => {
    this.setState({
      searchKey: e,
    });
    this.getUserList(e);
  };
  searchMember = (e) => {
    this.state.search = e;
    this.setState({
      searchSpin: true,
    });
    this.getMember();
  };
  orderMember = (id, name) => {
    this.setState({
      isSpin: true
    })
    this.state.role = id;
    this.state.roleName = name;
    this.getMember();
  };
  // 选择用户
  selectInputUser = (e, option) => {
    this.setState({
      user_id: e,
      searchKey: option.props.searchValue,
    });
    this.getUserList(option.props.searchValue);
  };
  getUserList = (e) => {
    const url = `/users/list.json`;
    axios
      .get(url, {
        params: {
          search: e,
        },
      })
      .then((result) => {
        if (result) {
          this.setState({
            userDataSource: result.data.users,
          });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // 增加协作者
  addCollaborator = () => {
    // const { project_id } = this.props;
    const { user_id } = this.state;
    if(user_id){
      this.setState({
        otherSpin: true,
      });
      const {projectsId ,owner} = this.props.match.params;
      const url = `/${owner}/${projectsId}/collaborators.json`;
      axios.post(url, {
        user_id,
      })
      .then((result) => {
        if (result) {
          this.setState({
            isSpin: true,
            otherSpin: false,
          });
          this.getMember();
        }
      })
      .catch((error) => {
        this.setState({
          isSpin: false,
          otherSpin: false,
        });
        console.log(error);
      });
    }
  };

  // 修改权限
  changeOperaiton = (e, id) => {
    // const { project_id, page } = this.state;
    this.setState({
      isSpin: true,
    });
    const {projectsId ,owner} = this.props.match.params;
    
    const url = `/${owner}/${projectsId}/collaborators/change_role.json`;
    axios
      .put(url, {
        user_id: id,
        role: e.key,
      })
      .then((result) => {
        if (result) {
          this.setState({
            isSpin: true,
          });
          this.props.showNotification("权限修改成功!");
          this.getMember();
        }
      })
      .catch((error) => {
        this.setState({
          isSpin: false,
        });
        console.log(error);
      });
  };

  // 删除协作者
  deleteUser = (id) => {
    const { page } = this.state;
    const {projectsId ,owner} = this.props.match.params;
    this.props.confirm({
      content: "确认将此成员从项目中移除？",
      onOk: () => {
        const { project_id } = this.props;
        const url = `/${owner}/${projectsId}/collaborators/remove.json`;
        axios
          .delete(url, {
            data: {
              user_id: id,
            },
          })
          .then((result) => {
            if (result) {
              this.setState({
                isSpin: true,
              });
              this.props.showNotification("成员删除成功！");
              this.getMember();
            }
          })
          .catch((error) => {
            this.setState({
              isSpin: false,
            });
            console.log(error);
          });
      },
    });
  };
  changePage = (page) => {
    this.state.page = page;
    this.setState({
      isSpin: true,
    });
    this.getMember();
  };

  render() {
    const {
      userDataSource,
      listData,
      isSpin,
      page,
      total_count,
      searchKey,
      otherSpin,
      searchSpin,
      roleName,
    } = this.state;
    // 获取当前项目的拥有者
    const { author } = this.props;
    const get_color = (role) => {
      if (role === "Manager") {
        return "text-green";
      } else if (role === "Developer") {
        return "text-primary";
      } else {
        return "text-yellow";
      }
    };
    const member_roles = (item) => {
      const operation = MENU_LIST.filter((i) => i.id === item.role);
      return (
        <span>
          {author && author.login === item.login ? (
            <label className={get_color(item.role)}>
              {operation && operation[0].name}
            </label>
          ) : (
            <Dropdown overlay={setRoles(`${item.id}`)} placement={"bottomCenter"}>
              <span className={get_color(item.role)}>
                {operation && operation[0].name}
                <Icon type="caret-down" className="ml2" size="13" />
              </span>
            </Dropdown>
          )}
        </span>
      );
    };
    const roleTitle = (
      <div><span className="mr3">角色</span>
        <Tooltip placement='bottom' title={<div>
          <div className="mb3">管理员：拥有仓库设置功能、代码库读、写操作</div>
          <div className="mb3">开发人员：只拥有代码库读、写操作</div>
          <div className="mb3">报告者：只拥有代码库读操作</div>
          </div>
        }>
        <Icon type="question-circle"></Icon>
    </Tooltip>
    </div>
    );
    const columns = [
      {
        title: "头像",
        dataIndex: "image_url",
        render: (text, item) => (
          <span className="f-wrap-alignCenter">
            <Link
              to={`/users/${item.login}`}
              className="show-user-link"
            >
              <img
                src={getImageUrl(`images/${text}`)}
                alt=""
                width="32px"
                height="32px"
                className="mr3 radius"
              />
            </Link>
          </span>
        ),
      },
      {
        title: "用户名",
        dataIndex: "name",
        render: (text, item) => (
          <Link to={`/users/${item.login}`} className="show-user-link">
            {text}
          </Link>
        ),
      },
      {
        title: "邮箱",
        dataIndex: "email",
        render: (text) => <span>{text}</span>,
      },
      {
        title: roleTitle,
        dataIndex: "role_name",
        render: (text, item) => member_roles(item),
      },
      {
        title: "操作",
        dataIndex: "action",
        render: (text, item) => (
          <span style={{ justifyContent: "center" }}>
            {author && author.login !== item.login && (
              <a
                className="text-delete"
                onClick={() => this.deleteUser(item.id)}
              >
                删除
              </a>
            )}
          </span>
        ),
      },
    ];
    const roles = (id) => (
      <Menu>
        <Menu.Item
          key={0}
          value={undefined}
          onClick={(e) => this.orderMember(undefined, "角色筛选")}
        >
          全部
        </Menu.Item>
        {MENU_LIST.map((item, key) => {
          return (
            <Menu.Item
              key={item.id}
              value={item.id}
              onClick={(e) => this.orderMember(item.id, item.name)}
            >
              {item.name}
            </Menu.Item>
          );
        })}
      </Menu>
    );
    const setRoles = (id) => (
      <Menu>
        {MENU_LIST.map((item, key) => {
          return (
            <Menu.Item
              key={item.id}
              value={item.id}
              onClick={(e) => this.changeOperaiton(e,id)}
            >
              {item.name}
            </Menu.Item>
          );
        })}
      </Menu>
    );

    const source =
      userDataSource &&
      userDataSource.map((item, key) => {
        return (
          <Option
            key={key}
            value={`${item.user_id}`}
            searchValue={`${item.username}`}
          >
            <img
              className="user_img radius"
              width="28"
              height="28"
              src={getImageUrl(`images/${item && item.image_url}`)}
              alt=""
            />
            <span className="ml10" style={{ "vertical-align": "middle" }}>
              {item.username}
              <span className="color-grey ml10">({item.login})</span>
            </span>
          </Option>
        );
      });
    return (
      <WhiteBack>
        <div className="flex-a-center baseForm bbr">
          <span className="font-18 text-black">协作者管理</span>
          <div className="addPanel">
            <AutoComplete
              dataSource={source}
              value={searchKey}
              style={{ width: 300 }}
              onChange={this.changeInputUser}
              onSelect={this.selectInputUser}
              placeholder="搜索需要添加的用户..."
            />
            <Button
              type="primary"
              ghost
              onClick={this.addCollaborator}
              className="ml15"
              loading={otherSpin}
            >
              <Icon type="plus" size="16"></Icon>
              添加成员
            </Button>
          </div>
        </div>
        <div className="grid-item-left baseForm">
          <Search
            placeholder="搜索项目成员..."
            enterButton="搜索"
            loading={searchSpin}
            onSearch={(value) => this.searchMember(value)}
          />
          <Dropdown overlay={roles} placement={"bottomCenter"}>
            <a className="ml180 text-primary">
              {roleName ? roleName : "角色筛选"}
              <Icon type="caret-down" size="16"></Icon>
            </a>
          </Dropdown>
        </div>

        <Spin spinning={isSpin}>
          <div className="collaboratorList baseForm">
            {listData && listData.length>0 ?  (
              <Table
                pagination={false}
                columns={columns}
                dataSource={listData}
                rowKey={(record) => record.id}
              ></Table>
            ) : (
              <NoneData _html="暂时还没有相关数据哦!" />
            )}
          </div>
        </Spin>
        {total_count && total_count > LIMIT ? (
          <div className="edu-txt-center mt20 mb20">
            <Pagination
              showQuickJumper
              pageSize={LIMIT}
              current={page}
              total={total_count}
              onChange={this.changePage}
            ></Pagination>
          </div>
        ) : (
          ""
        )}
      </WhiteBack>
    );
  }
}
export default Collaborator;
