<script>
import Spinner from '/src/components/shared/Spinner.vue';
import SemanticsSchemataComponent from "./frame-components/SemanticsSchemataComponent.vue";
import ExamplesComponent from "./frame-components/ExamplesComponent.vue";
import SlowalFrameComponent from "./frame-components/SlowalFrameComponent.vue";
import MeaningComponent from "./frame-components/MeaningComponent.vue";

export default {
  components: { Spinner, SemanticsSchemataComponent, ExamplesComponent, SlowalFrameComponent, MeaningComponent },
  props: {
    entryId: Number,
    lexicalUnitId: Number
  },
  data() {
    return {
      frame: null,
      unifiedFrame: undefined,
      gettext: window.gettext,
      hasPermission: window.has_permission,
      subentries: null,
      alternations: null,
      realisation_phrases: null,
      realisation_descriptions: null,
      examples: null,
      selectedFrameArguments: null,
      selectedExampleFrameArguments: null,
      selectedLus: null,
      selectedSchemas: null,
      selectedExamples: null,
    }
  },
  emits: ['refresh', 'refreshEntriesList'],
  methods: {
    goToEdit (unifiedFrameId, entryId, lexicalUnitId) {
      window.location = `/${lang}/entries/unification?unified_frame_id=${unifiedFrameId}&entry_id=${entryId}&lexical_unit_id=${lexicalUnitId}`;
    },
    hasWhiteSpace(s) {
      return /\s/g.test(s);
    },
    take () {
        const create_title_popup = {
          state0: {
            title: 'Wprowadź nazwę ramy',
            html: '<input type="text" size="32" name="title" />',
            buttons: {Anuluj: 0, Zapisz: 1},
            focus: -1,
            submit: function (e, v, m, f) {
              if (v == 0) {
                $.prompt.close();
              }
              if (v === 1) {
                e.preventDefault();
                const title = f.title;
                if (this.hasWhiteSpace(title) || title.length === 0) {
                  alert(gettext("Nazwa zunifikowanej ramy nie może być pusta oraz nie może zawierać białych znaków."));
                } else {
                  const data = {'lu_id': this.lexicalUnitId, 'unified_frame_title': title};
                  $.ajax({
                    type     : 'post',
                    url      : `/${lang}/unifier/frame_assign/`,
                    dataType : 'json',
                    data: data,
                    timeout  : 60000,
                    success: function (response) {
                      show_info('Rama została stworzona oraz przypisana użytkownikowi.');
                      this.goToEdit(response.unified_frame_id, this.entryId, this.lexicalUnitId);
                    }.bind(this),
                    error: function (request, errorType, errorMessage) {
                      show_error(errorType + ' (' + errorMessage + ')');
                    }
                  });
                }
              }
            }.bind(this)
          }
        }
        $.prompt(create_title_popup);
    },
    statusChange(api_method) {
      $.ajax({
        type: 'post',
        url: `/${lang}/semantics/${api_method}/${this.frame.id}/`,
        dataType: 'json',
        timeout: 60000,
      }).then(() => { this.setup(); this.$emit('refreshEntriesList'); });
    },
    markAsInvalid () {
      this.statusChange('frame_mark_as_invalid');
    },
    markAsBad () {
      this.statusChange('frame_mark_as_bad');
    },
    confirmInvalid () {
      this.statusChange('frame_confirm_invalid');
    },
    frame_confirm_as_not_matching_unified_frame () {
      this.statusChange('frame_confirm_as_not_matching_unified_frame');
    },
    rejectInvalid () {
      this.statusChange('frame_reject_invalid');
    },
    frame_reject_as_not_matching_unified_frame () {
      this.statusChange('frame_reject_as_not_matching_unified_frame');
    },
    isReadyToProcess () {
      return (!this.isLeksykograf() && this.unifiedFrame?.status === 'G') || (this.frame?.status === 'O' && this.unifiedFrame.assignee_username === window.USER_USERNAME);
    },
    isReadyToGet () {
      return this.frame?.status === 'N';
    },
    isLeksykograf () {
      return !has_permission("users.view_assignment");
    },
    setup_notes () {
      setup_notes($('#lexical-unit-notes'), $('#lexical-unit-notes-template'), this.lexicalUnitId, 'meanings.LexicalUnit', this.setup_notes);
    },
    meaningLuSelected(selectedLus) {
      this.selectedLus = selectedLus;
    },
    frameSelectionChanged (selectedFrameArguments) {
      this.selectedFrameArguments = selectedFrameArguments;
    },
    schemataSelected(schemas) {
      this.selectedSchemas = schemas;
    },
    exampleSelected(selectedExamples) {
      this.selectedExamples = selectedExamples;
    },
    setup () {
      $('#lexical-unit-notes').html('');

      // get_entry(this.entryId, false, this.lexicalUnitId).then(entry => {
      //   this.frame = entry.frames[0];
      //   this.unifiedFrame = entry.unified_frame;
      //   this.subentries = entry.subentries;
      //   this.alternations = entry.alternations;
      //   this.realisation_phrases = entry.realisation_phrases;
      //   this.realisation_descriptions = entry.realisation_descriptions;
      //   this.examples = entry.examples;
      //   setup_notes($('#lexical-unit-notes'), $('#lexical-unit-notes-template'), this.lexicalUnitId, 'meanings.LexicalUnit', this.setup_notes);
      // });

      var data = { 'entry' : this.entryId, 'no_filters' : false, 'lexical_unit_id': this.lexicalUnitId };
      $.ajax({
        type     : 'post',
        url      : '/' + lang + '/entries/get_entry/',
        dataType : 'json',
        data     : data,
        timeout  : 60000,
        success  : function(response) {

          window.clear_info();
          this.frame = response.frames[0];
          this.unifiedFrame = response.unified_frame;
          this.subentries = response.subentries;
          this.alternations = response.alternations;
          this.realisation_phrases = response.realisation_phrases;
          this.realisation_descriptions = response.realisation_descriptions;
          this.examples = response.examples;

          window.update_last_visited(response.last_visited);
          window.setup_notes($('#lexical-unit-notes'), $('#lexical-unit-notes-template'), this.lexicalUnitId, 'meanings.LexicalUnit', this.setup_notes);
        }.bind(this),
        error: function(request, errorType, errorMessage) {
          show_error(errorType + ' (' + errorMessage + ')');
        }
      });
    }
  },
  mounted () {
      this.$.appContext.config.globalProperties.$lexical_unit_display = this;
    Split(['#main-frames-pane', '#vue-examples'], {
      direction: 'vertical',
      sizes: [75, 25],
      gutterSize: 4,
    });
    Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
      sizes: [40, 60],
      gutterSize: 4,
      elementStyle: (dimension, size, gutterSize) => {
        return {
          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
        }
      },
    });
    this.setup();
  },
};
</script>

<template>
    <div class="col p-0 h-100 overflow-hidden">
      <div id="main-frames-pane" class="row">
        <div class="col h-100 pl-3 pr-1 pt-0 pb-2 overflow-auto" id="semantics-frames-pane">
            <spinner />
<!--            <div id="semantics-frames"></div>-->
            <div id="vue-semantics-frames" v-if="frame">
              <div class="frame mb-3 active">
                <div class="frame mt-0" id="lexical-unit">
                    <meaning-component
                        :key="frame.lexical_units"
                        :lexicalUnits="frame.lexical_units"
                        @meaning-lu-selected="meaningLuSelected"
                    ></meaning-component>
                </div>
                 <slowal-frame-component 
                    :frame="frame" 
                    :key="frame"
                    :selectedExamples="selectedExamples"
                    @frame-selection-changed="frameSelectionChanged"
                 />
               </div>
            </div>
      
            <div class="text-center mb-3">
              <div>
                <a class="btn btn-sm btn-outline-dark mr-2" v-if="frame?.status === 'N'" @click="isLeksykograf() ? markAsInvalid() : markAsBad()">{{ !isLeksykograf() ? gettext('Zła') : gettext('Błędna') }}</a>
                <a class="btn btn-sm btn-outline-dark mr-2" v-if="isReadyToGet() && unifiedFrame === null" @click="take">{{ gettext('Pobierz') }}</a>
                <a
                  class="btn btn-sm btn-outline-dark mr-2"
                  v-if="isReadyToProcess()"
                  @click="goToEdit(this.unifiedFrame.pk, this.entryId, this.lexicalUnitId)"
                >
                  {{ this.frame?.status === 'O' ? gettext('Obrabiaj') : gettext('Sprawdź') }}
                </a>
                <a
                  class="btn btn-sm btn-outline-dark mr-2"
                  v-if="frame?.status === 'S' && unifiedFrame?.status === 'S'"
                  @click="goToEdit(this.unifiedFrame.pk)"
                >
                  {{ gettext('Obejrzyj') }}
                </a>
                <a
                  class="btn btn-sm btn-outline-dark mr-2"
                  v-if="(frame?.status === 'B' || frame?.status === 'C') && hasPermission('semantics.manage_invalid_lexical_units')"
                  @click="frame?.status === 'C' ? frame_confirm_as_not_matching_unified_frame() : confirmInvalid()"
                >
                  {{ gettext('Potwierdź') }}
                </a>
                <a
                  class="btn btn-sm btn-outline-dark mr-2"
                  v-if="(frame?.status === 'B' || frame?.status === 'C') && hasPermission('semantics.manage_invalid_lexical_units')"
                  @click="frame?.status === 'C' ? frame_reject_as_not_matching_unified_frame() : rejectInvalid()"
                >
                  {{ gettext('Odrzuć') }}
                </a>
              </div>
            </div>
            <div id="lexical-unit-notes"></div>
          </div>
        <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
          <semantics-schemata-component 
            :subentries="subentries"
            :key="subentries"
            :frame="frame"
            :alternations="alternations"
            :realisation_phrases="realisation_phrases"
            :realisation_descriptions="realisation_descriptions"
            :selectedExamples="selectedExamples"
            @schemata-selected="schemataSelected"
          />
<!--          <div id="semantics-schemata"></div>-->
        </div>
      </div>
      <div id="vue-examples" class="row overflow-auto">
<!--        <div class="col w-100 p-0 tab-pane overflow-auto" id="examples">-->
<!--            <table id="semantics-examples" class="table table-sm table-hover">-->
<!--                <thead>-->
<!--                    <tr>-->
<!--                        <th scope="col">{{ gettext("Przykład") }}<i id="examples-argument"></i><i id="examples-lu"></i><i id="examples-schema"></i></th>-->
<!--                        <th scope="col">{{ gettext("Źródło") }}</th>-->
<!--                        <th scope="col">{{ gettext("Opinia") }}</th>-->
<!--                    </tr>-->
<!--                </thead>-->
<!--                <tbody id="semantics-examples-list">-->
<!--                </tbody>-->
<!--            </table>-->
<!--            <p class="mx-1 my-1" id="semantics-no-examples">{{ gettext("Brak przykładów") }}</p>-->
<!--        </div>-->
        <div class="col w-100 pr-4 overflow-auto">
          <examples-component v-if="examples"
              :examples="examples" 
              :frame="frame"
              :frame_arguments="selectedFrameArguments"
              :lus="selectedLus"
              :schemas="selectedSchemas"
              :key="examples"
              @example-selected="exampleSelected"
          />
        </div>
      </div>
    </div>
</template>