/*
 * 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 './index.scss';
import { getParams, request } from '../../globalLib';
import { Button, ConfigProvider, Dialog, Field, Form, Select } from '@alifd/next';

const FormItem = Form.Item;
const { AutoComplete: Combobox } = Select;

/**
 * @deprecated
 */
@ConfigProvider.config
class CloneDialog extends React.Component {
  static displayName = 'CloneDialog';

  constructor(props) {
    super(props);
    this.defaultPolicy = 'abort';
    this.state = {
      visible: false,
      serverId: '',
      tenantFrom: {},
      tenantTo: '',
      dataId: '',
      group: '',
      appName: '',
      configTags: '',
      records: [],
      namespaces: [],
      policy: this.defaultPolicy,
      policyLabel: '',
      total: 0,
      allPolicy: [],
    };
    this.field = new Field(this);
    this.formItemLayout = {
      labelCol: {
        fixedSpan: 6,
      },
      wrapperCol: {
        span: 18,
      },
    };
  }

  componentDidMount() {
    const { locale = {} } = this.props;
    this.setState({
      policyLabel: locale.terminate,
      allPolicy: [
        { value: 'abort', label: locale.terminate },
        { value: 'skip', label: locale.skip },
        { value: 'overwrite', label: locale.cover },
      ],
    });
  }

  openDialog(payload, callback) {
    const { locale = {} } = this.props;
    const serverId = getParams('serverId') || 'center';
    this.checkData = payload.checkData;
    this.callback = callback;
    request({
      type: 'get',
      url: `/diamond-ops/service/serverId/${serverId}/namespaceInfo`,
      success: res => {
        if (res.code === 0) {
          const dataSource = [];
          res.data.forEach(value => {
            if (value.namespace !== payload.tenantFrom.id) {
              dataSource.push({
                value: value.namespace,
                label: `${value.namespaceShowName} | ${value.namespace}`,
              });
            }
          });
          this.setState({
            visible: true,
            serverId: payload.serverId,
            tenantFrom: payload.tenantFrom,
            tenantTo: '',
            dataId: payload.dataId,
            group: payload.group,
            appName: payload.appName,
            configTags: payload.configTags,
            records: payload.records,
            namespaces: dataSource,
            total: payload.total,
          });
          this.field.setValue('select', '');
        } else {
          Dialog.alert({
            title: locale.getNamespaceFailed,
            content: res.message,
          });
        }
      },
    });
  }

  closeDialog() {
    this.setState({ visible: false });
  }

  setTenantTo(value) {
    this.field.setValue(value);
    this.setState({ tenantTo: value });
  }

  setPolicy(...value) {
    this.setState({
      policyLabel: value[1].label,
      policy: value[0],
    });
  }

  getQuery() {
    const { locale = {} } = this.props;
    if (this.state.records.length > 0) return locale.selectedEntry;
    if (
      this.state.dataId === '' &&
      this.state.group === '' &&
      this.state.appName === '' &&
      this.state.configTags.length === 0
    ) {
      return '';
    }
    let query = ' |';
    if (this.state.dataId !== '') {
      query += ` DataId: ${this.state.dataId},`;
    }
    if (this.state.group !== '') {
      query += ` Group: ${this.state.group},`;
    }
    if (this.state.appName !== '') {
      query += `${locale.homeApplication + this.state.appName},`;
    }
    if (this.state.configTags.length !== 0) {
      query += `${locale.tags + this.state.configTags},`;
    }
    return query.substr(0, query.length - 1);
  }

  doClone() {
    this.field.validate((errors, values) => {
      if (errors) {
        return;
      }
      this.closeDialog();
      this.checkData.tenantTo = this.state.tenantTo;
      this.checkData.policy = this.state.policy;
      this.callback(this.checkData, this.state.policyLabel);
    });
  }

  render() {
    const { locale = {} } = this.props;
    const { init } = this.field;
    const footer = (
      <div>
        <Button
          type="primary"
          onClick={this.doClone.bind(this)}
          {...{ disabled: this.state.total <= 0 }}
        >
          {locale.startCloning}
        </Button>
      </div>
    );

    return (
      <div>
        <Dialog
          visible={this.state.visible}
          footer={footer}
          footerAlign="center"
          style={{ width: 555 }}
          onCancel={this.closeDialog.bind(this)}
          onClose={this.closeDialog.bind(this)}
          title={`${locale.configurationCloning + this.state.serverId}）`}
        >
          <Form field={this.field}>
            <FormItem label={locale.source} {...this.formItemLayout}>
              <p>
                <span style={{ color: '#33cde5' }}>{this.state.tenantFrom.name}</span>
                {` | ${this.state.tenantFrom.id}`}
              </p>
            </FormItem>
            <FormItem label={locale.configurationNumber} {...this.formItemLayout}>
              <p>
                <span style={{ color: '#33cde5' }}>{this.state.total}</span> {this.getQuery()}{' '}
              </p>
            </FormItem>
            <FormItem label={locale.target} {...this.formItemLayout}>
              <Combobox
                style={{ width: '80%' }}
                size="medium"
                hasArrow
                placeholder={locale.selectNamespace}
                dataSource={this.state.namespaces}
                {...init('select', {
                  props: { onChange: this.setTenantTo.bind(this) },
                  rules: [{ required: true, message: locale.selectNamespace }],
                })}
              />
            </FormItem>
            <FormItem label={locale.conflict} {...this.formItemLayout}>
              <Select
                size="medium"
                hasArrow
                defaultValue={this.defaultPolicy}
                dataSource={this.state.allPolicy}
                onChange={this.setPolicy.bind(this)}
              />
            </FormItem>
          </Form>
        </Dialog>
      </div>
    );
  }
}

export default CloneDialog;
