import { h, Component } from 'preact';
import WBNavbarCommon from 'wb-navbar-common';
import WBArvadosCrumbs from 'wb-arvados-crumbs';
import WBToolboxDialog from 'wb-toolbox-dialog';
import makeArvadosRequest from 'make-arvados-request';
import linkState from 'linkstate';

function createInputsTemplate(workflow) {
  const g = JSON.parse(workflow.definition)['$graph'];
  const main = g.find(it => (it.id === '#main'));
  /* let res = '';
  main.inputs.map(it => {
    let id = it.id.split('/');
    id = id[id.length - 1];
    if (it.label) res += '  // ' + it.label + '\n';
    if (it.doc) res += ' //' + it.doc + '\n';
    res += '  ' + it.type
    res += '\'' + it.id + '\': null'
  }); */
  let res = main.inputs.map(it => { it.value = null; return it; });
  res = JSON.stringify(res, null, 2);
  res = res.split('\n');
  res = res.map((ln, i) => (i == 0 ? ln : '  ' + ln));
  res = res.join('\n');
  return res;
}

class WBLaunchWorkflowPage extends Component {
  constructor(...args) {
    super(...args);
    this.state.toolboxDialogId = uuid.v4();
  }

  componentDidMount() {
    let { app, workflowUuid } = this.props;
    let { arvHost, arvToken } = app.state;

    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/workflows/' + workflowUuid);
    prom = prom.then(xhr => this.setState({
      'workflow': xhr.response,
      'processName': xhr.response.name,
      'processDescription': xhr.response.description,
      'inputsFunctionText': '(() => {\n  return ' +
        createInputsTemplate(xhr.response) +
        ';\n})()'
    }));
  }

  render({ app, projectUuid, workflowUuid },
    { workflow, processName, processDescription,
    inputsFunctionText, toolboxDialogId }) {

    return (
      <div>
        <WBNavbarCommon app={ app } />

        <WBToolboxDialog app={ app } id={ toolboxDialogId }
          items={ app.state.toolboxItems } />

        { workflow ?
          (<form class="container-fluid">
            <h1>Launch Workflow</h1>

            <div class="form-group">
              <label>Workflow</label>
              <WBArvadosCrumbs app={ app } uuid={ workflowUuid } />
            </div>

            <div class="form-group">
              <label for="projectUuid">Project UUID</label>
              <input type="email" class="form-control" id="projectUuid" placeholder="Enter project uuid" />
              <button class="btn btn-primary" onclick={ e => { e.preventDefault(); $('#' + toolboxDialogId).modal(); } }>Browse</button>
            </div>

            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="createSubproject" />
              <label class="form-check-label" for="createSubproject">Create subproject</label>
            </div>

            <div class="form-group">
              <label for="processName">Process Name</label>
              <input type="text" class="form-control" id="processName"
                placeholder="Enter process name" value={ processName }
                onChange={ linkState(this, 'processName') }/>
            </div>

            <div class="form-group">
              <label for="processDescription">Process Description</label>
              <input type="text" class="form-control" id="processDescription"
                placeholder="Enter process name" value={ processDescription }
                onChange={ linkState(this, 'processDescription') } />
            </div>

            <div class="form-group">
              <label for="inputs">Inputs</label>
              <textarea class="form-control" id="inputs"
                style="font-family: monospace;" rows="20"
                value={ inputsFunctionText }></textarea>
            </div>
          </form>) : <div>Loading...</div> }
      </div>
    );
  }
}

export default WBLaunchWorkflowPage;