/*
 * 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 RegionGroup from '../../../components/RegionGroup';
import { getParams, request } from '../../../globalLib';
import {
  ConfigProvider,
  Field,
  Form,
  Grid,
  Input,
  Loading,
  Pagination,
  Select,
  Table,
} from '@alifd/next';

import './index.scss';

const FormItem = Form.Item;
const { Row, Col } = Grid;

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

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

  constructor(props) {
    super(props);
    this.state = {
      value: '',
      visible: false,
      loading: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      dataSource: [],
    };
    this.field = new Field(this);
    this.group = getParams('group') || '';
    this.dataId = getParams('dataId') || '';
    this.serverId = getParams('serverId') || '';
    this.tenant = getParams('namespace') || '';
  }

  componentDidMount() {
    this.field.setValue('type', 0);
    this.field.setValue('group', this.group);
    this.field.setValue('dataId', this.dataId);
  }

  onSearch() {}

  onChange() {}

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

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

  queryTrackQuery = () => {
    const self = this;
    let queryUrl = '';
    const type = this.getValue('type');
    if (type === 1) {
      const ip = this.getValue('ip');
      queryUrl = `v1/cs/listener?ip=${ip}`;
      const tenant = window.nownamespace || getParams('namespace') || '';
      if (tenant) {
        queryUrl += `&tenant=${tenant}`;
      }
    } else {
      const dataId = this.getValue('dataId');
      const group = this.getValue('group');
      if (!dataId || !group) return false;
      queryUrl = `v1/cs/configs/listener?dataId=${dataId}&group=${group}`;
    }
    request({
      url: queryUrl,
      beforeSend() {
        self.openLoading();
      },
      success(data) {
        if (data.collectStatus === 200) {
          const dataSoureTmp = [];
          const status = data.lisentersGroupkeyStatus;
          for (const key in status) {
            if (type === 1) {
              const obj = {};
              let [dataId, group] = key.split('+');
              obj.dataId = dataId;
              obj.group = group;
              obj.md5 = status[key];
              dataSoureTmp.push(obj);
            } else {
              const obj = {};
              obj.ip = key;
              obj.md5 = status[key];
              dataSoureTmp.push(obj);
            }
          }
          self.setState({
            dataSource: dataSoureTmp || [],
            total: dataSoureTmp.length || 0,
          });
        }
      },
      complete() {
        self.closeLoading();
      },
    });
  };

  showMore() {}

  changePage = value => {
    this.setState({
      currentPage: value,
    });
  };

  resetSearch() {
    this.field.reset();
    this.forceUpdate();
  }

  renderStatus(values, index, record) {
    const { locale = {} } = this.props;
    return (
      <div>
        {record.pushStatus === true ? (
          <span style={{ color: 'green' }}>{locale.success}</span>
        ) : (
          <span style={{ color: 'red' }}>{locale.failure}</span>
        )}
      </div>
    );
  }

  getQueryLater = () => {
    setTimeout(() => {
      // 子组件可能优先于父组件所以延迟执行
      this.queryTrackQuery();
    });
  };

  render() {
    const { locale = {} } = this.props;
    const { init, getValue } = this.field;
    this.init = init;
    this.getValue = getValue;

    const selectDataSource = [
      {
        label: locale.configuration,
        value: 0,
      },
      {
        label: 'IP',
        value: 1,
      },
    ];
    return (
      <div style={{ padding: 10 }}>
        <Loading
          shape="flower"
          style={{ position: 'relative' }}
          visible={this.state.loading}
          tip="Loading..."
          color="#333"
        >
          <RegionGroup left={locale.listenerQuery} namespaceCallBack={this.getQueryLater} />
          <Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
            <Col span="24">
              <Form inline field={this.field}>
                <FormItem label={`${locale.queryDimension}:`}>
                  <Select
                    dataSource={selectDataSource}
                    style={{ width: 200 }}
                    {...this.init('type')}
                  />
                </FormItem>
                <FormItem
                  label="Data ID:"
                  style={{
                    display: this.getValue('type') === 0 ? '' : 'none',
                  }}
                  required
                >
                  <Input
                    placeholder={locale.pleaseEnterTheDataId}
                    style={{ width: 200 }}
                    {...this.init('dataId', {
                      rules: [
                        {
                          required: true,
                          message: locale.dataIdCanNotBeEmpty,
                        },
                      ],
                    })}
                  />
                </FormItem>
                <FormItem
                  label="Group:"
                  style={{
                    display: this.getValue('type') === 0 ? '' : 'none',
                  }}
                  required
                >
                  <Input
                    placeholder={locale.pleaseInputGroup}
                    style={{ width: 200 }}
                    {...this.init('group', {
                      rules: [
                        {
                          required: true,
                          message: locale.groupCanNotBeEmpty,
                        },
                      ],
                    })}
                  />
                </FormItem>
                <FormItem
                  label="IP:"
                  style={{
                    display: this.getValue('type') === 0 ? 'none' : '',
                  }}
                >
                  <Input
                    placeholder={locale.pleaseInputIp}
                    style={{ width: 200, boxSize: 'border-box' }}
                    {...this.init('ip')}
                  />
                </FormItem>
                <FormItem label="">
                  <Form.Submit
                    validate
                    type="primary"
                    onClick={this.queryTrackQuery}
                    style={{ marginRight: 10 }}
                  >
                    {locale.query}
                  </Form.Submit>
                </FormItem>
              </Form>
            </Col>
          </Row>
          <div style={{ position: 'relative' }}>
            <h3
              style={{
                height: 28,
                lineHeight: '28px',
                paddingLeft: 10,
                borderLeft: '3px solid #09c',
                margin: 0,
                marginBottom: 10,
                fontSize: 16,
              }}
            >
              {locale.queryResultsQuery}
              <strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
              {locale.articleMeetRequirementsConfiguration}
            </h3>
          </div>
          <Row style={{ padding: 0 }}>
            <Col span="24" style={{ padding: 0 }}>
              {this.getValue('type') === 1 ? (
                <Table
                  dataSource={this.state.dataSource}
                  fixedHeader
                  maxBodyHeight={500}
                  locale={{ empty: locale.pubNoData }}
                >
                  <Table.Column title="Data ID" dataIndex="dataId" />
                  <Table.Column title="Group" dataIndex="group" />
                  <Table.Column title="MD5" dataIndex="md5" />
                </Table>
              ) : (
                <Table
                  dataSource={this.state.dataSource}
                  fixedHeader
                  maxBodyHeight={400}
                  locale={{ empty: locale.pubNoData }}
                >
                  <Table.Column title="IP" dataIndex="ip" />
                  <Table.Column title="MD5" dataIndex="md5" />
                </Table>
              )}
            </Col>
          </Row>
          <div style={{ marginTop: 10, textAlign: 'right' }}>
            <Pagination
              current={this.state.currentPage}
              total={this.state.total}
              pageSize={this.state.pageSize}
              onChange={this.changePage}
            />
            ,
          </div>
        </Loading>
      </div>
    );
  }
}

export default ListeningToQuery;
