import React, {Component} from 'react';

import {Input, Select, Button, Row, Col} from 'antd';

const Option = Select.Option;

class TencentConfig extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: props.configs.find(obj => obj.name === props.currentConfig) || {
        name: '',
        schemas: [],
        cloudServer: '',
        database: '',
        configLocal: {}
      }
    };
  }

  switchCS = (value) => {
    this.setState({
      config: {
        ...this.state.config,
        cloudServer: value
      }
    })
  };

  switchConfigLocal = (label) => {
    return (e) => {
      this.setState({
        config: {
          ...this.state.config,
          configLocal: {...this.state.config.configLocal, [label]: e.target.value}
        }
      })
    };
  };

  switchDataBase = (value) => {
    this.setState({
      config: {
        ...this.state.config,
        database: value
      }
    })
  };

  componentWillReceiveProps(next) {
    this.setState({
      config: next.configs.find(obj => obj.name === next.currentConfig) || {
        name: '',
        schemas: [],
        cloudServer: '',
        database: '',
        configLocal: {}
      }
    });
  };

  render() {
    return (
      <div style={{margin: 20}}>
        <div style={{marginTop: 10}}>
          {
            this.state.config.name ? '' :
              <div style={{marginBottom: 30}}>
                <p><b>how about create a new one</b></p>
              </div>
          }
        </div>


        <div>
          <span className='table-title'> Cloud Config</span>

          <div style={{marginBottom: 10}}>
            <p><b>Cloud Server providers</b></p>
            <Select defaultValue="tencent" value={this.state.config.cloudServer} style={{width: 120}}
                    onChange={this.switchCS}>
              <Option value="tencent">Tencent</Option>
              <Option value="aliyun">Aliyun</Option>
              <Option value="huawei">Huawei</Option>
            </Select>
          </div>


          <Row>
            <Col span={6}>
              <div style={{marginBottom: 30}}>
                <p><b>Serverless Cloud Function</b></p>
                <div>
                  <div>
                    <span className='vice-title'>secretID: </span>
                    <Input value={this.state.config.configLocal.SCF_secretID} style={{width: 200}}
                           onChange={this.switchConfigLocal('SCF_secretID')}/>
                  </div>
                  <div style={{marginTop: 5}}>
                    <span className='vice-title'>secretKey: </span>
                    <Input value={this.state.config.configLocal.SCF_secretKey} style={{width: 200}}
                           onChange={this.switchConfigLocal('SCF_secretKey')}/>
                  </div>
                </div>
              </div>
            </Col>

            <Col span={6}>
              <div style={{marginBottom: 30}}>
                <p><b>API</b></p>
                <div>
                  <div>
                    <span className='vice-title'>secretID: </span>
                    <Input value={this.state.config.configLocal.API_secretID} style={{width: 200}}
                           onChange={this.switchConfigLocal('API_secretID')}/>
                  </div>
                  <div style={{marginTop: 5}}>
                    <span className='vice-title'>secretKey: </span>
                    <Input value={this.state.config.configLocal.API_secretKey} style={{width: 200}}
                           onChange={this.switchConfigLocal('API_secretKey')}/>
                  </div>
                </div>
              </div>
            </Col>
          </Row>

        </div>

        <div style={{marginBottom: 30}}>
          <span className='table-title'> Database Config</span>
          <Select defaultValue="mongodb" value={this.state.config.database} style={{width: 120}}
                  onChange={this.switchDataBase}>
            <Option value="mongodb">MongoDB</Option>
            <Option value="nedb">nedb</Option>
            <Option value="postgres">postgres</Option>
          </Select>
        </div>

        <Button type="primary" onClick={() => {
          this.props.addConfig(this.state.config, this.state.config.name);
        }}>SUBMIT</Button>
        <Button style={{marginLeft: 10}} type="danger" onClick={() => {
          this.props.deleteConfig(this.state.config.name);
        }}>DELETE</Button>
      </div>
    )
  }
}

export default TencentConfig;