import React, { Component } from "react";
import { Form, Input, Checkbox, Select , Spin } from "antd";
import Title from '../Component/Title';
import {WhiteBack} from '../Component/layout';
import axios from "axios";
import "./setting.scss";
const { TextArea } = Input;
const { Option } = Select;

const menu = [
  {name:"主页",index:"home"},
  {name:"代码库",index:"code"},
  {name:"易修 (Issue)",index:"issues"},
  {name:"合并请求",index:"pulls"},
  {name:"工作流(beta版)",index:"devops"},
  {name:"资源库",index:"resources"},
  {name:"里程碑",index:"versions"},
  {name:"动态",index:"activity"},
]
class Setting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      CategoryList: undefined,
      LanguageList: undefined,
      private_check: undefined,
      loading:true,
      project_units:['home',"activity","code"]
    };
  }

  componentDidUpdate=(prevPros)=>{
    if(prevPros && this.props && !this.props.checkIfLogin()){
      this.props.history.push("/403")
      return
    }
  }
  componentDidMount = () => {
    this.getCategory();
    this.getLanguage();
    this.getInfo();
  };
  getLanguage = () => {
    const url = `/project_languages.json`;
    axios
      .get(url)
      .then((result) => {
        if (result) {
          let LanguageList = this.setOptionsList(result.data.project_languages);
          this.setState({
            LanguageList,
          });
        }
      })
      .catch((error) => {});
  };

  getInfo = () => {
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/edit.json`;
    axios
      .get(url)
      .then((result) => {
        if (result) {
          const { project_units } = this.state;
          let units = result.data.project_units; 
          units.push(...project_units);

          this.props.form.setFieldsValue({
            ...result.data,
            project_units:units
          });
          this.setState({
            private_check: result.data.private,
            loading:false,
            project_units:units
          });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  getCategory = () => {
    const url = `/project_categories.json`;
    axios
      .get(url)
      .then((result) => {
        if (result) {
          let CategoryList = this.setOptionsList(
            result.data.project_categories
          );
          this.setState({
            CategoryList,
          });
        }
      })
      .catch((error) => {});
  };

  setOptionsList = (data) => {
    let list = undefined;
    if (data && data.length > 0) {
      list = data.map((item, key) => {
        return (
          <Option key={item.id} value={item.id}>
            {item.name}
          </Option>
        );
      });
    }
    return list;
  };

  // 更新仓库设置
  resetSetting = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.setState({
          loading:true
        })
        const { projectsId , owner } = this.props.match.params;
        const navUrl =  `/${owner}/${projectsId}/project_units.json`;

        let unit = values.project_units.filter(item => (item !== "home" && item!== "activity" && item!== "code"));
        axios.post(navUrl, {
          unit_types:unit
        }).then((result) => {
          if (result) {
            this.update(values);
          }
        }).catch(error=>{})
      }
    });
  };

  update=(values)=>{
    const { projectsId , owner } = this.props.match.params;
    const { private_check } = this.state;
    const url = `/${owner}/${projectsId}.json`;
    axios.put(url, {
      name: values.project_name,
      description: values.project_description,
      private: private_check,
      ...values,
    }).then((result) => {
      if (result) {
        this.props.showNotification(`仓库信息修改成功！`);
        const { getDetail } = this.props;
        getDetail && getDetail();
        this.setState({
          loading:false
        })
      }
    }).catch((error) => {
      console.log(error);
      this.setState({
        loading:false
      })
    });
  }

  // 删除本仓库
  deleteProject = () => {
    this.props.confirm({
      content: "删除后无法恢复，是否确认删除本仓库？",
      onOk: () => {
        const { projectsId , owner } = this.props.match.params;
        const url = `/${owner}/${projectsId}.json`;
        axios
          .delete(url)
          .then((result) => {
            this.props.showNotification("仓库删除成功！");
            this.props.history.push("/projects");
          })
          .catch((error) => {
            console.log(error);
          });
      },
    });
  };
  changePrivate = (e) => {
    this.setState({
      private_check: e.target.checked,
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { projectDetail } = this.props;

    const { CategoryList, LanguageList, private_check ,loading } = this.state;
    let mirror = projectDetail && projectDetail.mirror;
    let type = projectDetail && projectDetail.type;
    return (
      <div>
        <Spin spinning={loading}>
          <WhiteBack>
            <Title>基本设置</Title>
            <Form className="baseForm">
              <Form.Item label="项目名称">
                {getFieldDecorator("project_name", {
                  rules: [
                    {
                      required: true,
                      message: "请输入项目名称",
                    },
                  ],
                })(<Input placeholder="请输入项目名称" />)}
              </Form.Item>
              <div className="df" style={{ alignItems: "center" }}>
                <span className="mr20 mb15 font-16">可见性</span>
                <Form.Item label="">
                  {getFieldDecorator("private", {
                    rules: [],
                  })(
                    <Checkbox
                      checked={private_check}
                      onChange={this.changePrivate}
                    >
                      将仓库设为私有
                    </Checkbox>
                  )}
                </Form.Item>
              </div>
              <Form.Item label="项目简介">
                {getFieldDecorator("project_description", {
                  rules: [],
                })(
                  <TextArea
                    placeholder="请输入项目简介"
                    style={{ height: "80px" }} maxLength={200}
                  />
                )}
              </Form.Item>
              <Form.Item label="项目类别">
                {getFieldDecorator("project_category_id", {
                  rules: [
                    {
                      required: true,
                      message: "请选择大类别",
                    },
                  ],
                })(<Select>{CategoryList}</Select>)}
              </Form.Item>
              <Form.Item label="项目语言">
                {getFieldDecorator("project_language_id", {
                  rules: [
                    {
                      required: true,
                      message: "请选择项目语言",
                    },
                  ],
                })(<Select>{LanguageList}</Select>)}
              </Form.Item>
              <Form.Item label="项目导航">
                {getFieldDecorator("project_units", {
                  rules: [],
                })(
                  <Checkbox.Group>
                    {
                      menu.map((item,key)=>{
                        return(
                          <Checkbox 
                            key={key} 
                            value={item.index} 
                            disabled={item.index === "home" || item.index === "activity" || item.index === "code" || (mirror && (type && type===2) && item.index === "pulls")}
                          >{item.name}</Checkbox>
                        )
                      })
                    }
                  </Checkbox.Group>
                )}
              </Form.Item>
              <p className="clearfix">
                <a className="submitBtn" onClick={this.resetSetting}>
                  更新仓库设置
                </a>
              </p>
            </Form>
            {/* 镜像设置部分，暂无接口，先不显示 */}
            {/* <Mirror /> */}
          </WhiteBack>
          <WhiteBack className="dangerousBox mb20">
          <div>
            <div className="dangerousTitle">危险操作区</div>
            <div className="flex-a-center padding15-10">
              <div>
                <p className="font-bd font-16">删除本仓库</p>
                <p className="mt10">
                  删除仓库是永久性的,
                  无法撤消，且删除后，与仓库关联的项目/任务/合并请求/版本发布等，均会被删除
                </p>
              </div>
              <a onClick={this.deleteProject} className="red_deleteBtn">
                删除本仓库
              </a>
            </div>
          </div>
        </WhiteBack>
        </Spin>
      </div>
    );
  }
}
const WrappedSettingIndexForm = Form.create({ name: "settingForm" })(Setting);
export default WrappedSettingIndexForm;
