{# Needs some keys in context. See AJAX view "PlotCardView" #}
{% extends 'analysis/simple_card_detail.html' %}
{% load analysis_tags %}
{% load icon_tags %}
{% load static %}

{% block card_header %}
  {% if not analyses_unready and analyses_success %}
    <div class="btn-group btn-group-sm float-right dropdown">
      <a type="button" class="btn btn-default"
         href="{% url 'analysis:download' analyses_success|analyses_results_ids_list_str 'contact mechanics' 'zip' %}">
        {% fa5_icon 'download' %} Download ZIP
      </a>
    </div>
  {% endif %}
  <div class="pull-left">
    <h3>{{ title }}</h3>
  </div>
{% endblock card_header %}

{% block card_body %}
  <div class="row">
    {% include 'analysis/analyses_alerts.html' %}
  </div>
  <div id="contact-mechanics-card" class="row">
    <b-alert variant="error" :show="errorMessage !== null">[[ errorMessage ]]</b-alert>
    {# Left side with simulation results #}
    <div v-if="errorMessage === null" class="col-sm-5">
      <div class="tab-pane show active" id="plot-{{ card_id }}" role="tabpanel" aria-labelledby="card-tab">
        {% if analyses_success %}
          {# Show all analyses for which we have results #}
          <bokeh-plot
            :plots="contactMechanicsPlots"
            :categories="contactMechanicsCategories"
            :data-sources='{{ data_sources|safe }}'
            :selectable="true"
            v-on:selected="onSelected"
            :options-widgets="['layout', 'legend', 'lineWidth', 'symbolSize']"
            output-backend="{{ output_backend }}">
          </bokeh-plot>
        {% endif %}
      </div>
    </div>

    {% if not analyses_unready %}
      {# Middle with group of tabs #}
      <div class="col-2 col-sm-2 col-md-2 col-lg-2">

        <div class="nav nav-pills nav-pills-custom flex-column" aria-orientation="vertical">
          <a class="nav-link mb-3 p-3 shadow active" data-toggle="pill" href="#contacting-points-tab" role="tab"
             aria-selected="true">
            Contact geometry
          </a>
          <a class="nav-link mb-3 p-3 shadow" data-toggle="pill" href="#pressure-tab" role="tab" aria-selected="false">
            Contact pressure
          </a>
          <a class="nav-link mb-3 p-3 shadow" data-toggle="pill" href="#displacement-tab" role="tab"
             aria-selected="false">
            Displacement
          </a>
          <a class="nav-link mb-3 p-3 shadow" data-toggle="pill" href="#gap-tab" role="tab" aria-selected="false">
            Gap
          </a>
          <a class="nav-link mb-3 p-3 shadow" data-toggle="pill" href="#distribution-function-tab" role="tab"
             aria-selected="false">
            Distribution functions
          </a>
          <hr>
          <a class="nav-link mb-3 p-3 shadow" data-toggle="pill" href="#actions-tab" role="tab" aria-selected="false">
            Parameters
          </a>
          {% if analyses_failure or extra_warnings %}
            <a class="nav-link mb-3 p-3 shadow" data-toggle="pill" href="#warnings-tab-{{ card_id }}" role="tab"
               aria-selected="false">
              Warnings
            </a>
          {% endif %}

        </div>

      </div>

      {# Right with simulation details and actions #}
      <div class="col-sm-5">
        {# Tab contents on right side #}
        <div class="tab-content">
          <div class="tab-pane fade active show" id="contacting-points-tab">
            <div v-if="selection === null" id="geometry" class="alert alert-info">For contact geometry, select a point
              in the graphs on the left!
            </div>
            <deep-zoom-image v-if="selection !== null"
                             :prefix-url="'{% url 'analysis:data' pk=123 location='step-456/dzi/contacting-points/' %}'.replace('123/step-456', selection.analysis_id + '/' + selection.data_path)"
                             ref="contactingPoints">
            </deep-zoom-image>
            <div v-if="selection !== null" class="pull-right">
              <a class="btn btn-default btn-block btn-lg mt-3" v-on:click="$refs.contactingPoints.download()">
                {% fa5_icon 'download' %} Download PNG
              </a>
            </div>
          </div>
          <div class="tab-pane fade" id="pressure-tab">
            <div v-if="selection === null" id="pressure" class="alert alert-info">For contact pressure, select a point
              in the graphs on the left!
            </div>
            <deep-zoom-image v-if="selection !== null"
                             :prefix-url="'{% url 'analysis:data' pk=123 location='step-456/dzi/pressure/' %}'.replace('123/step-456', selection.analysis_id + '/' + selection.data_path)"
                             :colorbar="true"
                             ref="pressure">
            </deep-zoom-image>
            <div v-if="selection !== null" class="pull-right">
              <a class="btn btn-default btn-block btn-lg" v-on:click="$refs.pressure.download()">
                {% fa5_icon 'download' %} Download PNG
              </a>
            </div>
          </div>
          <div class="tab-pane fade" id="displacement-tab">
            <div v-if="selection === null" id="displacement" class="alert alert-info">For displacement, select a point
              in the graphs on the left!
            </div>
            <deep-zoom-image v-if="selection !== null"
                             :prefix-url="'{% url 'analysis:data' pk=123 location='step-456/dzi/displacement/' %}'.replace('123/step-456', selection.analysis_id + '/' + selection.data_path)"
                             :colorbar="true"
                             ref="displacement">
            </deep-zoom-image>
            <div v-if="selection !== null" class="pull-right">
              <a class="btn btn-default btn-block btn-lg" v-on:click="$refs.displacement.download()">
                {% fa5_icon 'download' %} Download PNG
              </a>
            </div>
          </div>
          <div class="tab-pane fade" id="gap-tab">
            <div v-if="selection === null" id="gap" class="alert alert-info">For gap, select a point in the graphs on
              the left!
            </div>
            <deep-zoom-image v-if="selection !== null"
                             :prefix-url="'{% url 'analysis:data' pk=123 location='step-456/dzi/gap/' %}'.replace('123/step-456', selection.analysis_id + '/' + selection.data_path)"
                             :colorbar="true"
                             ref="gap">
            </deep-zoom-image>
            <div v-if="selection !== null" class="pull-right">
              <a class="btn btn-default btn-block btn-lg" v-on:click="$refs.gap.download()">
                {% fa5_icon 'download' %} Download PNG
              </a>
            </div>
          </div>
          <div class="tab-pane fade" id="distribution-function-tab">
            <div v-if="selection === null" id="distribution-function" class="alert alert-info">For pressure
              distribution, select a point in the graphs on the left!
            </div>
            <bokeh-plot
              v-if="selection !== null"
              :plots="distributionPlots"
              :data-sources="distributionDataSources"
              output-backend="{{ output_backend }}">
            </bokeh-plot>
          </div>
          <div class="tab-pane fade" id="actions-tab">

            {# BUTTON "TASK INFORMATION" #}
            <div class="row p-3">
              <div class="col-12">
                {% if analyses_available and not analyses_unready %}
                  <a class="btn btn-default btn-block btn-lg" href="#" data-toggle="modal"
                     data-target="#statusesModal-{{ card_id }}">{% fa5_icon 'tasks' %} Tasks</a>
                {% endif %}
              </div>
            </div>

            {# ELEMENTS FOR TRIGGERING A CALCULATION #}
            <div class="row p-3">
              <div class="col-12">

                <form>
                  <div class="form-group row">

                    {# Substrate selection #}

                    <div class="input-group col-auto mb-3">
                      <div class="input-group-prepend">
                        <div class="input-group-text">
                          Type
                        </div>

                      </div>
                      <b-form-select v-model="periodicity" :options="periodicityOptions"></b-form-select>
                      <div class="input-group-append">
                        <div class="input-group-text">
                          <b-icon-info-circle-fill
                            title="Type of calculation"
                            v-b-popover.hover="'This option determines how the elastic interactions are calculated. This affects edge effects that may show up in the results at large contact area. Calculations can assume that the surface repeats periodically or that it is pushing down on a nonperiodic, infinitely expanded half-space. The latter option corresponds to mapping the surface topography on a flat punch. If not given, this value is automatically chosen as periodic for periodic topographies, else non-periodic.'">
                          </b-icon-info-circle-fill>
                        </div>
                      </div>
                    </div>

                    {# Hardness input #}
                    <div class="input-group col-auto mb-3">

                      <div class="input-group-prepend">
                        <div class="input-group-text">
                          Hardness
                        </div>
                        <div class="input-group-text">
                          <input type="checkbox" v-model="enableHardness">
                        </div>
                      </div>
                      <input id="hardness-input" type="number" min="0" step="0.1" class="form-control"
                             v-model="hardness" :disabled="!enableHardness">
                      <div class="input-group-append ">
                        <div class="input-group-text">
                          E<sup>*</sup>
                        </div>
                        <div class="input-group-text">
                          <b-icon-info-circle-fill
                            v-b-popover.hover="'Setting a hardness enables plastic calculations. Local pressure cannot exceed hardness value.'"
                            title="Hardness">
                          </b-icon-info-circle-fill>
                        </div>
                      </div>
                    </div>

                    {# Step selection #}
                    <div class="input-group col-auto mb-3">
                      {# Automatic #}
                      <div class="input-group-prepend">
                        <div class="input-group-text">
                          <input type="radio"
                                 name="pressure-selection"
                                 value="automatic"
                                 checked="checked"
                                 v-model="pressureSelection"
                                 aria-label="Radio button for automatic step selection">
                        </div>
                        <div class="input-group-text">
                          Number of steps
                        </div>
                      </div>
                      <input id='nsteps-input' type="number"
                             min="{{ limits_calc_kwargs.nsteps.min }}"
                             max="{{ limits_calc_kwargs.nsteps.max }}"
                             step="1" class="form-control"
                             v-model="nsteps"
                             :disabled="pressureSelection != 'automatic'">
                      <div class="input-group-append ">
                        <div class="input-group-text">
                          <b-icon-info-circle-fill
                            title="Automatic step selection"
                            v-b-popover.hover="'Number of pressure steps which are chosen automatically.'">
                          </b-icon-info-circle-fill>
                        </div>
                      </div>
                    </div>
                    <div class="input-group col-auto mb-3">
                      {# Fixed list #}
                      <div class="input-group-prepend">
                        <div class="input-group-text">
                          <input type="radio"
                                 name="pressure-selection"
                                 value="manual"
                                 v-model="pressureSelection"
                                 aria-label="Radio button for list of values">
                        </div>
                        <div class="input-group-text">
                          Pressures
                        </div>
                      </div>
                      <b-form-tags class="form-control"
                                   placeholder=""
                                   separator=" ,;"
                                   v-model="pressures"
                                   :disabled="pressureSelection != 'manual'">
                      </b-form-tags>
                      <div class="input-group-append">
                        <div class="input-group-text">
                          E<sup>*</sup>
                        </div>
                        <div class="input-group-text">
                          <b-icon-info-circle-fill
                            title="Manual step selection"
                            v-b-popover.hover="'Enter positive pressure values for which you need results. You can also copy/paste a comma-separated list of values with a comma after every number. Use dot as decimal separator. The maximum number of values is {{ limits_calc_kwargs.pressures.maxlen }}.'">
                          </b-icon-info-circle-fill>
                        </div>
                      </div>
                    </div>

                    {# Input of maximum number of iterations  #}
                    <div class="input-group col-auto">
                      {# Automatic #}
                      <div class="input-group-prepend">
                        <div class="input-group-text">
                          Max. number of iterations
                        </div>
                      </div>
                      <input id='maxiter-input' type="number"
                             min="{{ limits_calc_kwargs.maxiter.min }}"
                             max="{{ limits_calc_kwargs.maxiter.max }}"
                             step="100" class="form-control"
                             v-model="maxNbIter">
                      <div class="input-group-append ">
                        <div class="input-group-text">
                          <b-icon-info-circle-fill
                            title="Maximum number of iterations"
                            v-b-popover.hover="'Maximum number of iterations (<={{ limits_calc_kwargs.maxiter.max }}).'">
                          </b-icon-info-circle-fill>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>

                {% if request.user.is_anonymous %}
                  <button title="Please login for this feature"
                          class="btn btn-primary btn-block btn-lg disabled" disabled>
                    {% fa5_icon 'repeat' %} Recalculate
                  </button>
                {% else %}
                  <b-alert variant="warning"
                           :show="recalculateWarning"
                           dismissible
                           v-on:dismissed="recalculateWarning = false">
                    Some of the input parameters were invalid. We have updated those parameters for you. Please
                    double-check the parameters and click <b>Recalculate</b> when ready.
                  </b-alert>
                  <button title="Trigger calculation with given arguments"
                          class="btn btn-primary btn-block btn-lg"
                          v-on:click="recalculate">
                    {% fa5_icon 'repeat' %} Recalculate
                  </button>
                {% endif %}
              </div>
            </div>

          </div>
          {% include 'analysis/analyses_warnings_tab_pane.html' %}
        </div>
      </div>
    {% endif %}

  </div>

{% endblock card_body %}

{% block card_javascript %}
  <script>
    new Vue({
      delimiters: ['[[', ']]'],
      el: "#contact-mechanics-card",
      data: function () {
        return {
          errorMessage: null,
          recalculateWarning: false,
          selection: null,
          periodicity: "{{ initial_calc_kwargs.substrate_str|default_if_none:"nonperiodic" }}",
          nsteps: {{ initial_calc_kwargs.nsteps|default_if_none:10 }},
          enableHardness: {% if initial_calc_kwargs.hardness %}1{% else %}0{% endif %},
          pressureSelection: {% if initial_calc_kwargs.pressures %}"manual"{% else %}"automatic"{% endif %},
          hardness: {{ initial_calc_kwargs.hardness|default_if_none:"undefined" }},
          pressures: {{ initial_calc_kwargs.pressures|default_if_none:"[]" }},
          maxNbIter: {{ initial_calc_kwargs.maxiter|default_if_none:100 }},
          periodicityOptions: [
            {value: "periodic", text: "Periodic (repeating array of the measurement)"},
            {value: "nonperiodic", text: "Free boundaries (flat punch with measurement)"}
          ]
        }
      },
      computed: {
        contactMechanicsPlots: function () {
          return [{
            title: "Contact area vs load",
            xData: "data.mean_pressures",
            yData: "data.total_contact_areas",
            auxiliaryDataColumns: {dataPath: "data.data_paths"},
            alphaData: "data.converged.map((value) => value ? 1.0 : 0.3)",
            xAxisLabel: "Normalized pressure p/E*",
            yAxisLabel: "Fractional contact area A/A0",
            xAxisType: "log",
            yAxisType: "log"
          }, {
            title: "Load vs displacement",
            xData: "data.mean_gaps",
            yData: "data.mean_pressures",
            auxiliaryDataColumns: {dataPath: "data.data_paths"},
            alphaData: "data.converged.map((value) => value ? 1.0 : 0.3)",
            xAxisLabel: "Normalized mean gap u/h_rms",
            yAxisLabel: "Normalized pressure p/E*",
            xAxisType: "linear",
            yAxisType: "log"
          }]
        },
        contactMechanicsCategories: function () {
          return [{key: "subject_name", title: "Measurements"}];
        },
        distributionPlots: function () {
          return [{
            title: "Pressure",
            xData: "data.pressure",
            yData: "data.pressureProbabilityDensity",
            xAxisLabel: "Pressure p (E*)",
            yAxisLabel: "Probability density P(p) (E*⁻¹)"
          }, {
            title: "Gap",
            xData: "data.gap.map((value) => data.gapSIScaleFactor * value)",
            yData: "data.gapProbabilityDensity.map((value) => data.gapProbabilityDensitySIScaleFactor * value)",
            xAxisLabel: "Gap g (m)",
            yAxisLabel: "Probability density P(g) (m⁻¹)"
          }, {
            title: "Cluster area",
            xData: "data.clusterArea.map((value) => data.clusterAreaSIScaleFactor * value)",
            yData: "data.clusterAreaProbabilityDensity.map((value) => data.clusterAreaProbabilityDensitySIScaleFactor * value)",
            xAxisLabel: "Cluster area A (m²)",
            yAxisLabel: "Probability density P(A) (m⁻²)"
          }];
        },
        distributionDataSources: function () {
          return [{
            url: "{% url 'analysis:data' pk=123 location='step-456/json/distributions.json' %}".replace('123/step-456', this.selection.analysis_id + '/' + this.selection.data_path)
          }];
        }
      },
      methods: {
        recalculate: function () {
          this.recalculateWarning = false;

          if (this.pressureSelection == "automatic") {
            if (this.nsteps < {{ limits_calc_kwargs.nsteps.min }}) {
              this.nsteps = {{ limits_calc_kwargs.nsteps.min }};
              this.recalculateWarning = true;
            }
            if (this.nsteps > {{ limits_calc_kwargs.nsteps.max }}) {
              this.nsteps = {{ limits_calc_kwargs.nsteps.max }};
              this.recalculateWarning = true;
            }
          } else { // pressure_selection_mode == "manual"
            const originalLength = this.pressures.length;
            this.pressures = this.pressures.map(parseFloat);
            this.pressures = this.pressures.filter((p) => {
              return (p != null) && (p > 0)
            });
            if (originalLength > this.pressures.length) {
              this.recalculateWarning = true;
            }
            if (this.pressures.length < 1) {
              this.pressures = [1];
              this.recalculateWarning = true;
            } else if (this.pressures.length > {{ limits_calc_kwargs.pressures.maxlen }}) {
              this.pressures.length = {{ limits_calc_kwargs.pressures.maxlen }};
              this.recalculateWarning = true;
            }
          }

          if (this.maxNbIter < {{ limits_calc_kwargs.maxiter.min }}) {
            this.maxNbIter = {{ limits_calc_kwargs.maxiter.min }};
            this.recalculateWarning = true;
          }
          if (this.maxNbIter > {{ limits_calc_kwargs.maxiter.max }}) {
            this.maxNbIter = {{ limits_calc_kwargs.maxiter.max }};
            this.recalculateWarning = true;
          }

          if (this.recalculateWarning) {
            // Return here if some parameters were modified
            return;
          }

          const function_kwargs = {
            substrate_str: this.periodicity,
            hardness: parseFloat(this.hardness),
            nsteps: this.pressureSelection == "automatic" ? parseInt(this.nsteps) : null,
            pressures: this.pressureSelection == "manual" ? this.pressures : null,
            maxiter: parseInt(this.maxNbIter)
          };

          // FIXME! Switch to fetch API, but there is some weirdness with CSRF tokens going on
          $.ajax({
            type: "POST",
            url: "{% url 'analysis:card-submit' %}",
            timeout: 0,
            data: {
              function_id: {{ function.id }},
              subjects_ids_json: JSON.stringify({{ subjects_ids_json|safe }}),
              function_kwargs_json: JSON.stringify(function_kwargs),
              csrfmiddlewaretoken: "{{csrf_token}}"
            },
            success: (data, textStatus, xhr) => {
              // debug_msg("Job submission successful. Status: "+xhr.status+" textStatus: "+textStatus);
              if (xhr.status == 200) {
                submit_analyses_card_ajax(
                    "{% url 'analysis:card' %}",
                    "card-wrapper", "contact-mechanics-card",
                    "detail", {{ function.id }}, {{ subjects_ids_json|safe }}, 0);
                // debug_msg("Triggered card reload. Status: "+xhr.status+" textStatus: "+textStatus);
              } else {
                this.errorMessage = "Triggering calculation failed, status: " + xhr.status + " response:" + xhr.responseText;
              }
            },
            error: (xhr, textStatus, errorThrown) => {
              console.log("AJAX error when submitting jobs: errorThrown: " + errorThrown + " status: " + xhr.status + " responseText: " + xhr.responseText);
              this.errorMessage = "Please report this error: " + errorThrown + xhr.status + xhr.responseText;
            }
          });
        },
        onSelected: function (obj, data) {
          const name = data.source.name;
          const path = data.source.data.dataPath[data.source.selected.indices[0]];
          const split_path = path.split('/');
          this.selection = {
            analysis_id: name.split('-')[1],
            data_path: split_path[split_path.length - 1]  // We need to do some name mangling
          };
        }
      }
    });
  </script>
{% endblock card_javascript %}