/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

import React, { Component } from "devtools/client/shared/vendor/react";
import {
  div,
  form,
  input,
  li,
  label,
  ul,
  option,
  select,
} from "devtools/client/shared/vendor/react-dom-factories";
import PropTypes from "devtools/client/shared/vendor/react-prop-types";
import { connect } from "devtools/client/shared/vendor/react-redux";
import actions from "../../actions/index";

import { CloseButton } from "../shared/Button/index";

import { getXHRBreakpoints, shouldPauseOnAnyXHR } from "../../selectors/index";
import ExceptionOption from "./Breakpoints/ExceptionOption";

const classnames = require("resource://devtools/client/shared/classnames.js");

// At present, the "Pause on any URL" checkbox creates an xhrBreakpoint
// of "ANY" with no path, so we can remove that before creating the list
function getExplicitXHRBreakpoints(xhrBreakpoints) {
  return xhrBreakpoints.filter(bp => bp.path !== "");
}

const xhrMethods = [
  "ANY",
  "GET",
  "POST",
  "PUT",
  "HEAD",
  "DELETE",
  "PATCH",
  "OPTIONS",
];

class XHRBreakpoints extends Component {
  constructor(props) {
    super(props);

    this.state = {
      editing: false,
      inputValue: "",
      inputMethod: "ANY",
      focused: false,
      editIndex: -1,
      clickedOnFormElement: false,
    };
  }

  static get propTypes() {
    return {
      disableXHRBreakpoint: PropTypes.func.isRequired,
      enableXHRBreakpoint: PropTypes.func.isRequired,
      onXHRAdded: PropTypes.func.isRequired,
      removeXHRBreakpoint: PropTypes.func.isRequired,
      setXHRBreakpoint: PropTypes.func.isRequired,
      shouldPauseOnAny: PropTypes.bool.isRequired,
      showInput: PropTypes.bool.isRequired,
      togglePauseOnAny: PropTypes.func.isRequired,
      updateXHRBreakpoint: PropTypes.func.isRequired,
      xhrBreakpoints: PropTypes.array.isRequired,
    };
  }

  componentDidMount() {
    const { showInput } = this.props;

    // Ensures that the input is focused when the "+"
    // is clicked while the panel is collapsed
    if (this._input && showInput) {
      this._input.focus();
    }
  }

  componentDidUpdate(prevProps, prevState) {
    const _input = this._input;

    if (!_input) {
      return;
    }

    if (!prevState.editing && this.state.editing) {
      _input.setSelectionRange(0, _input.value.length);
      _input.focus();
    } else if (this.props.showInput && !this.state.focused) {
      _input.focus();
    }
  }

  handleNewSubmit = e => {
    e.preventDefault();
    e.stopPropagation();

    const setXHRBreakpoint = function () {
      this.props.setXHRBreakpoint(
        this.state.inputValue,
        this.state.inputMethod
      );
      this.hideInput();
    };

    // force update inputMethod in state for mochitest purposes
    // before setting XHR breakpoint
    this.setState(
      { inputMethod: e.target.children[1].value },
      setXHRBreakpoint
    );
  };

  handleExistingSubmit = e => {
    e.preventDefault();
    e.stopPropagation();

    const { editIndex, inputValue, inputMethod } = this.state;
    const { xhrBreakpoints } = this.props;
    const { path, method } = xhrBreakpoints[editIndex];

    if (path !== inputValue || method != inputMethod) {
      this.props.updateXHRBreakpoint(editIndex, inputValue, inputMethod);
    }

    this.hideInput();
  };

  handleChange = e => {
    this.setState({ inputValue: e.target.value });
  };

  handleMethodChange = e => {
    this.setState({
      focused: true,
      editing: true,
      inputMethod: e.target.value,
    });
  };

  hideInput = () => {
    if (this.state.clickedOnFormElement) {
      this.setState({
        focused: true,
        clickedOnFormElement: false,
      });
    } else {
      this.setState({
        focused: false,
        editing: false,
        editIndex: -1,
        inputValue: "",
        inputMethod: "ANY",
      });
      this.props.onXHRAdded();
    }
  };

  onFocus = () => {
    this.setState({ focused: true, editing: true });
  };

  onMouseDown = () => {
    this.setState({ editing: false, clickedOnFormElement: true });
  };

  handleTab = e => {
    if (e.key !== "Tab") {
      return;
    }

    if (e.currentTarget.nodeName === "INPUT") {
      this.setState({
        clickedOnFormElement: true,
        editing: false,
      });
    } else if (e.currentTarget.nodeName === "SELECT" && !e.shiftKey) {
      // The user has tabbed off the select and we should
      // cancel the edit
      this.hideInput();
    }
  };

  editExpression = index => {
    const { xhrBreakpoints } = this.props;
    const { path, method } = xhrBreakpoints[index];
    this.setState({
      inputValue: path,
      inputMethod: method,
      editing: true,
      editIndex: index,
    });
  };

  renderXHRInput(onSubmit) {
    const { focused, inputValue } = this.state;
    const placeholder = L10N.getStr("xhrBreakpoints.placeholder");
    return form(
      {
        key: "xhr-input-container",
        className: classnames("xhr-input-container xhr-input-form", {
          focused,
        }),
        onSubmit,
      },
      input({
        className: "xhr-input-url",
        type: "text",
        placeholder,
        onChange: this.handleChange,
        onBlur: this.hideInput,
        onFocus: this.onFocus,
        value: inputValue,
        onKeyDown: this.handleTab,
        ref: c => (this._input = c),
      }),
      this.renderMethodSelectElement(),
      input({
        type: "submit",
        style: {
          display: "none",
        },
      })
    );
  }

  handleCheckbox = index => {
    const { xhrBreakpoints, enableXHRBreakpoint, disableXHRBreakpoint } =
      this.props;
    const breakpoint = xhrBreakpoints[index];
    if (breakpoint.disabled) {
      enableXHRBreakpoint(index);
    } else {
      disableXHRBreakpoint(index);
    }
  };

  renderBreakpoint = breakpoint => {
    const { path, disabled, method } = breakpoint;
    const { editIndex } = this.state;
    const { removeXHRBreakpoint, xhrBreakpoints } = this.props;

    // The "pause on any" checkbox
    if (!path) {
      return null;
    }

    // Finds the xhrbreakpoint so as to not make assumptions about position
    const index = xhrBreakpoints.findIndex(
      bp => bp.path === path && bp.method === method
    );

    if (index === editIndex) {
      return this.renderXHRInput(this.handleExistingSubmit);
    }
    return li(
      {
        className: "xhr-container",
        key: `${path}-${method}`,
        title: path,
        onDoubleClick: () => this.editExpression(index),
      },
      label(
        null,
        React.createElement("input", {
          type: "checkbox",
          className: "xhr-checkbox",
          checked: !disabled,
          onChange: () => this.handleCheckbox(index),
          onClick: ev => ev.stopPropagation(),
        }),
        div(
          {
            className: "xhr-label-method",
          },
          method
        ),
        div(
          {
            className: "xhr-label-url",
          },
          path
        ),
        div(
          {
            className: "xhr-container__close-btn",
          },
          React.createElement(CloseButton, {
            handleClick: () => removeXHRBreakpoint(index),
          })
        )
      )
    );
  };

  renderBreakpoints = explicitXhrBreakpoints => {
    const { showInput } = this.props;
    return React.createElement(
      React.Fragment,
      null,
      ul(
        {
          className: "pane expressions-list",
        },
        explicitXhrBreakpoints.map(this.renderBreakpoint)
      ),
      showInput && this.renderXHRInput(this.handleNewSubmit)
    );
  };

  renderCheckbox = explicitXhrBreakpoints => {
    const { shouldPauseOnAny, togglePauseOnAny } = this.props;
    return div(
      {
        className: classnames("breakpoints-options", {
          empty: explicitXhrBreakpoints.length === 0,
        }),
      },
      React.createElement(ExceptionOption, {
        className: "breakpoints-exceptions",
        label: L10N.getStr("pauseOnAnyXHR"),
        isChecked: shouldPauseOnAny,
        onChange: () => togglePauseOnAny(),
      })
    );
  };
  renderMethodOption = method => {
    return option(
      {
        key: method,
        value: method,
        // e.stopPropagation() required here since otherwise Firefox triggers 2x
        // onMouseDown events on <select> upon clicking on an <option>
        onMouseDown: e => e.stopPropagation(),
      },
      method
    );
  };

  renderMethodSelectElement = () => {
    return select(
      {
        value: this.state.inputMethod,
        className: "xhr-input-method",
        onChange: this.handleMethodChange,
        onMouseDown: this.onMouseDown,
        onKeyDown: this.handleTab,
      },
      xhrMethods.map(this.renderMethodOption)
    );
  };

  render() {
    const { xhrBreakpoints } = this.props;
    const explicitXhrBreakpoints = getExplicitXHRBreakpoints(xhrBreakpoints);
    return React.createElement(
      React.Fragment,
      null,
      this.renderCheckbox(explicitXhrBreakpoints),
      explicitXhrBreakpoints.length === 0
        ? this.renderXHRInput(this.handleNewSubmit)
        : this.renderBreakpoints(explicitXhrBreakpoints)
    );
  }
}

const mapStateToProps = state => ({
  xhrBreakpoints: getXHRBreakpoints(state),
  shouldPauseOnAny: shouldPauseOnAnyXHR(state),
});

export default connect(mapStateToProps, {
  setXHRBreakpoint: actions.setXHRBreakpoint,
  removeXHRBreakpoint: actions.removeXHRBreakpoint,
  enableXHRBreakpoint: actions.enableXHRBreakpoint,
  disableXHRBreakpoint: actions.disableXHRBreakpoint,
  updateXHRBreakpoint: actions.updateXHRBreakpoint,
  togglePauseOnAny: actions.togglePauseOnAny,
})(XHRBreakpoints);