import React, {Component} from 'react';
import {Button, Col, Menu, Modal, Radio, Row, Spin} from 'antd';
import SelectTestSuiteTable from './SelectTestSuiteTable';
import SelectSuiteCapbilityEditor from './SelectSuiteCapbilityEditor';
import {ipcRenderer} from '../../polyfills';
import {BUTTON} from '../../../../gui-common/components/AntdTypes';
import ReactJson from 'react-json-view';


export default class ApiAutoInteraction extends Component {
  constructor (props) {
    super(props);
    this.state = {
      apiResponse: null,
      loading: false,
      envVisible: false,
      selectedEnvId: null,
      suiteEnvs: []
    }
    this.onChange = this.onChange.bind(this);
    this.receiveRequest = this.receiveRequest.bind(this);
  }
  componentDidMount () {
    this.setState({loading: true});
    ipcRenderer.on('receive-request', this.receiveRequest);
    const params = {requestName: 'getSuiteGroupList'};
    ipcRenderer.send('make-request', JSON.stringify(params));

    const envParams = {requestName: 'testSuiteEnv'};
    ipcRenderer.send('make-request', JSON.stringify(envParams));
  }

  receiveRequest(evt, args) {
    const { showSuiteGroupList, aipAutoCodeGenerate, selectTestEnvId, saveRequireVars } = this.props;
    this.setState({loading: false});
    const {requestName} = JSON.parse(args);

    if (requestName === 'getSuiteGroupList') {
      const {convertResponse} = JSON.parse(args);
      showSuiteGroupList(convertResponse);
    } else if (requestName === 'startUIAutomation') {
      const {response} = JSON.parse(args);
      this.setState({apiResponse: response});
      saveRequireVars();
      aipAutoCodeGenerate();
    } else if (requestName === 'testSuiteEnv') {
      const {convertResponse} = JSON.parse(args);
      this.setState({suiteEnvs: convertResponse});
      const envId = convertResponse[0].key;
      const envName = convertResponse[0].label;
      selectTestEnvId(envId,envName);
    }
  }

 componentWillUnmount () {
   ipcRenderer.removeListener('receive-request', this.receiveRequest);
 }

  onChange (e) {
    console.log('radio checked', e.target.value);
    const {selectTestEnvId} = this.props;
    this.setState({selectedEnvId: e.target.value});
    selectTestEnvId(e.target.value);
  };

  render () {
    const { groupListData, t, requestTestSuiteList, suitId, envId, requestApiAuto } = this.props;

    const envElement = this.state.suiteEnvs.filter(obj => obj.key === envId)[0];

      return <Spin spinning={this.state.loading}>
          <Row >
            <Col span={6} >
              <div style={{ height: '100%', overflowY: 'auto' }}>
                <Menu
                  items={groupListData}
                  mode="inline"
                  style={{ maxHeight: '100%'}}
                  onClick={ (item) => {
                    requestTestSuiteList({groupId:item.key, skip: 0})
                  }
                  }
                />
              </div>
            </Col>
            <Col span={7} style={{paddingLeft: "10px"}}>
              <SelectTestSuiteTable {...this.props} />
            </Col>
            <Col span={11} style={{paddingLeft: "10px"}}>
              <Row style={{marginBottom: "10px", justifyContent: 'space-between'}}>

                <Button key="select" type={BUTTON.PRIMARY}  onClick={ () => {
                  this.setState({
                    envVisible: true,
                  })
                } }>{t(envElement === undefined ? "select" : envElement.label)} </Button>

                <Button key="confirm" type={BUTTON.PRIMARY} disabled={suitId == null || envId == null} onClick={ () => {

                  this.setState({
                    loading: true,
                    apiResponse: null,
                  })
                  requestApiAuto()
                } }>{t('confirm')} </Button>
              </Row>

              <SelectSuiteCapbilityEditor {...this.props} />
              {this.state.apiResponse != null && <div style={{ width: '100%', overflow: 'auto', backgroundColor: "#ffffff" }}>
                <ReactJson src={this.state.apiResponse} name={null} />
              </div>}
            </Col>
          </Row>
        <Modal key="modal"
               visible={this.state.envVisible}
               onCancel={ () => {this.setState({
                 envVisible: false,
               })}}
               onOk={ () => {this.setState({
                 envVisible: false,
               })}}
               title={t('Select Environment')}>
          <Radio.Group onChange={this.onChange} value={envId}>
            {this.state.suiteEnvs.map((element) => (
              <Radio key={element.key} value={element.key}>
                {element.label}
              </Radio>
            ))}
          </Radio.Group>
        </Modal>;
      </Spin>;

  }

}