import React from 'react';
import { CodeBuilder } from '../../CodeBuilder/CodeBuilder';
import { CodeHinter } from '../../CodeBuilder/CodeHinter';
import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/theme/duotone-light.css';

class Restapi extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      options: this.props.options
    };
  }

  componentDidMount() {
    this.setState({
      options: this.props.options
    });
  }

  changeOption = (option, value) => {
    const { options } = this.state;
    const newOptions = { ...options, [option]: value };
    this.setState({ options: newOptions });
    this.props.optionsChanged(newOptions);
  };

  addNewKeyValuePair = (option) => {
    const { options } = this.state;
    const newOptions = { ...options, [option]: [...options[option], ['', '']] };

    this.setState({
      options: newOptions
    });
    this.props.optionsChanged(newOptions);
  };

  removeKeyValuePair = (option, index) => {
    const { options } = this.state;
    options[option].splice(index, 1);

    this.setState({ options });
    this.props.optionsChanged(options);
  };

  keyValuePairValueChanged = (e, keyIndex, option, index) => {
    const value = e.target.value;
    const { options } = this.state;

    options[option][index][keyIndex] = value;

    this.setState({ options });
    this.props.optionsChanged(options);
  };

  render() {
    const { options } = this.state;

    return (
      <div>
        <div className="mb-3 mt-2">
          <div className="mb-3">
            <div className="row g-2">
              <div className="col-auto">
                <select
                  className="form-select"
                  value={options.method}
                  onChange={(e) => this.changeOption('method', e.target.value)}
                >
                  <option value="get">GET</option>
                  <option value="post">POST</option>
                  <option value="put">PUT</option>
                  <option value="patch">PATCH</option>
                  <option value="delete">DELETE</option>
                </select>
              </div>
              <div className="col">
                {/* <input
                  type="text"
                  className="form-control"
                  value={options.url}
                  onChange={(e) => { this.changeOption('url', e.target.value)}}
                  placeholder="https://api.example.com/v2/endpoint.json"
                /> */}
                <CodeHinter
                  currentState={this.props.currentState}
                  initialValue={options.url}
                  onChange={(value) => { this.changeOption('url', value)}}
                />
                {/* <CodeMirror
                  fontSize="2"
                  // onCursorActivity={(instance) => setCursorPosition(instance.getCursor().ch)}
                  // onChange={(instance) => delayedHandleChange(instance)}
                  value={options.url}
                  // onFocus={(instance) => handleOnFocus(instance)}
                  // onBlur={() => {
                  //   setShowDropdown(false);
                  // }}
                  options={{
                    mode: 'javascript',
                    lineWrapping: true,
                    scrollbarStyle: null,
                    lineNumbers: false
                  }}
                /> */}
              </div>
            </div>
          </div>

          {['url_params', 'headers', 'body'].map((option) => (
            <div className="mb-3" key={option}>
              <div className="row g-2">
                <div className="col-md-2">
                  <label className="form-label pt-2">{option}</label>
                </div>
                <div className="col-md-10">
                  {options[option].map((pair, index) => (
                    <div className="input-group" key={index}>
                      <input
                        type="text"
                        value={pair[0]}
                        className="form-control"
                        placeholder="key"
                        autoComplete="off"
                        onChange={(e) => this.keyValuePairValueChanged(e, 0, option, index)}
                      />
                      <input
                        type="text"
                        value={pair[1]}
                        className="form-control"
                        placeholder="value"
                        autoComplete="off"
                        onChange={(e) => this.keyValuePairValueChanged(e, 1, option, index)}
                      />
                      <span
                        className="input-group-text"
                        role="button"
                        onClick={() => {
                          this.removeKeyValuePair(option, index);
                        }}
                      >
                        x
                      </span>
                    </div>
                  ))}
                  <button className="btn btn-outline-primary btn-sm" onClick={() => this.addNewKeyValuePair(option)}>
                    + Add new
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export { Restapi };