/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Button, Checkbox, ConfigProvider, Dialog, Field, Form, Input, Loading } from '@alifd/next';
import SuccessDialog from '../../../components/SuccessDialog';
import { getParams, request } from '../../../globalLib';

import './index.scss';

@ConfigProvider.config
class ConfigSync extends React.Component {
  static displayName = 'ConfigSync';

  static propTypes = {
    locale: PropTypes.object,
    history: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.successDialog = React.createRef();
    this.field = new Field(this);
    this.dataId = getParams('dataId') || 'yanlin';
    this.group = getParams('group') || '';
    this.serverId = getParams('serverId') || '';

    this.state = {
      configType: 0,

      envvalues: [],
      commonvalue: [],
      envComponent: '',
      envGroups: [],
      envlist: [],
      loading: false,
      showmore: false,
    };
    this.codeValue = '';
    this.mode = 'text';
    this.ips = '';
  }

  componentDidMount() {
    this.getDataDetail();
    //  this.getDomain();
  }

  toggleMore() {
    this.setState({
      showmore: !this.state.showmore,
    });
  }

  getEnvList(value) {
    this.setState({
      envvalues: value,
    });
    this.envs = value;
  }

  getDomain() {
    const self = this;
    request({
      url: '/diamond-ops/env/domain',
      success(data) {
        if (data.code === 200) {
          const { envGroups } = data.data;

          self.setState({
            envGroups,
          });
        }
      },
    });
  }

  getDataDetail() {
    const self = this;
    const { locale = {} } = this.props;
    this.tenant = getParams('namespace') || '';
    this.serverId = getParams('serverId') || 'center';
    let url = `/diamond-ops/configList/detail/serverId/${this.serverId}/dataId/${
      this.dataId
    }/group/${this.group}/tenant/${this.tenant}?id=`;
    if (this.tenant === 'global' || !this.tenant) {
      url = `/diamond-ops/configList/detail/serverId/${this.serverId}/dataId/${this.dataId}/group/${
        this.group
      }?id=`;
    }
    request({
      url,
      beforeSend() {
        self.openLoading();
      },
      success(result) {
        if (result.code === 200) {
          const { data = {} } = result;

          self.field.setValue('dataId', data.dataId);
          // self.field.setValue('content', data.content);
          self.field.setValue('appName', data.appName);
          // self.field.setValue('envs', self.serverId);
          self.field.setValue('group', data.group);
          // self.field.setValue('md5', data.md5);
          self.field.setValue('content', data.content || '');
          const env = data.envs || [];
          const envvalues = [];
          const envlist = [];
          for (let i = 0; i < env.length; i++) {
            envlist.push({
              value: env[i].serverId,
              label: env[i].name,
            });
            if (env[i].serverId === self.serverId) {
              envvalues.push(self.serverId);
            }
          }
          self.setState({
            envlist,
            envvalues,
            // self.setState({
            //     envname: env.name,
            // })
            // self.serverId = env.serverId;
          });
        } else {
          Dialog.alert({
            title: locale.error,
            content: result.message,
          });
        }
      },
      complete() {
        self.closeLoading();
      },
    });
  }

  goList() {
    this.props.history.push(
      `/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`
    );
  }

  sync() {
    const self = this;
    const { locale = {} } = this.props;
    const payload = {
      dataId: this.field.getValue('dataId'),
      appName: this.field.getValue('appName'),
      group: this.field.getValue('group'),
      content: this.field.getValue('content'),
      betaIps: this.ips,
      targetEnvs: this.envs,
    };
    request({
      type: 'put',
      contentType: 'application/json',
      url: `/diamond-ops/configList/serverId/${this.serverId}/dataId/${payload.dataId}/group/${
        payload.group
      }?id=`,
      data: JSON.stringify(payload),
      success(res) {
        const _payload = {};
        _payload.maintitle = locale.syncConfigurationMain;
        _payload.title = locale.syncConfiguration;
        _payload.content = '';
        _payload.dataId = payload.dataId;
        _payload.group = payload.group;
        _payload.isok = res.code === 200;
        if (!_payload.isok) {
          _payload.isok = false;
          _payload.message = res.message;
        }
        self.successDialog.current.openDialog(_payload);
      },
    });
  }

  syncResult() {
    const dataId = this.field.getValue('dataId');
    const gruop = this.field.getValue('group');
    this.props.history.push(
      `/diamond-ops/static/pages/config-sync/index.html?serverId=center&dataId=${dataId}&group=${gruop}`
    );
  }

  changeEnv(values) {
    this.targetEnvs = values;
    this.setState({
      envvalues: values,
    });
  }

  getIps(value) {
    this.ips = value;
  }

  goResult() {
    this.props.history.push(
      `/consistencyEfficacy?serverId=${this.serverId}&dataId=${this.dataId}&group=${this.group}`
    );
  }

  openLoading() {
    this.setState({
      loading: true,
    });
  }

  closeLoading() {
    this.setState({
      loading: false,
    });
  }

  render() {
    const { init } = this.field;
    const { locale = {} } = this.props;
    const formItemLayout = {
      labelCol: {
        span: 2,
      },
      wrapperCol: {
        span: 22,
      },
    };

    return (
      <div style={{ padding: 10 }}>
        <Loading
          shape="flower"
          style={{ position: 'relative', width: '100%' }}
          visible={this.state.loading}
          tip="Loading..."
          color="#333"
        >
          <h1>{locale.syncConfiguration}</h1>
          <Form field={this.field}>
            <Form.Item label="Data ID:" required {...formItemLayout}>
              <Input htmlType="text" disabled={'disabled'} {...init('dataId')} />
              <div style={{ marginTop: 10 }}>
                <a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
                  {this.state.showmore ? locale.collapse : locale.advancedOptions}
                </a>
              </div>
            </Form.Item>
            <div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
              <Form.Item label="Group ID:" required {...formItemLayout}>
                <Input htmlType="text" disabled={'disabled'} {...init('group')} />
              </Form.Item>
              <Form.Item label={locale.home} required {...formItemLayout}>
                <Input htmlType="text" disabled={'disabled'} {...init('appName')} />
              </Form.Item>
            </div>
            <Form.Item label={locale.region} required {...formItemLayout}>
              <Input htmlType="text" disabled={'disabled'} {...init('envs')} />
            </Form.Item>

            <Form.Item label={locale.configuration} required {...formItemLayout}>
              <Input.TextArea
                htmlType="text"
                multiple
                rows={15}
                disabled={'disabled'}
                {...init('content')}
              />
            </Form.Item>
            <Form.Item label={locale.target} required {...formItemLayout}>
              <div>
                <Checkbox.Group
                  value={this.state.envvalues}
                  onChange={this.changeEnv.bind(this)}
                  dataSource={this.state.envlist}
                />
              </div>
            </Form.Item>
            <Form.Item label=" " {...formItemLayout}>
              <div style={{ textAlign: 'right' }}>
                <Button type="primary" onClick={this.sync.bind(this)} style={{ marginRight: 10 }}>
                  {locale.sync}
                </Button>
                {}
                <Button type="light" onClick={this.goList.bind(this)}>
                  {locale.back}
                </Button>
              </div>
            </Form.Item>
          </Form>
          <SuccessDialog ref={this.successDialog} />
        </Loading>
      </div>
    );
  }
}

export default ConfigSync;
