<template>
  <accordion-card :title="$t('learning.product_overview.texts')">
    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.product_overview.short_description')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6" class="pl-6">
        <quill-editor
          v-model="short_description"
          id="short_description"
          :options="editorOption"
          class="quill"
          :class="{ focused: selectedEditor === 'short_description' }"
          @focus="onEditorFocus($event, 'short_description')"
          @blur="onEditorBlur($event)"
          @change="onEditorChange($event, 'short_description')"
          v-if="editMode"
        />
        <!-- @change="onEditorChange($event)" -->

        <span v-html="short_description" v-else></span>
      </v-col>
      <v-col cols="12" sm="12" md="3"> </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.product_overview.learning_goals')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6" class="pl-6">
        <quill-editor
          v-model="learning_goals"
          :options="editorOption"
          class="quill"
          :class="{ focused: selectedEditor === 'learning_goals' }"
          @focus="onEditorFocus($event, 'learning_goals')"
          @blur="onEditorBlur($event)"
          @change="onEditorChange($event, 'learning_goals')"
          v-if="editMode"
        />
        <span v-html="learning_goals" v-else></span>
      </v-col>
      <v-col cols="12" sm="12" md="3"> </v-col>
    </v-row>
    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.product_overview.review')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6" class="pl-6">
        <quill-editor
          v-model="review"
          :options="editorOption"
          class="quill"
          :class="{ focused: selectedEditor === 'review' }"
          @focus="onEditorFocus($event, 'review')"
          @blur="onEditorBlur($event)"
          @change="onEditorChange($event, 'review')"
          v-if="editMode"
        />
        <span v-html="review" v-else></span>
      </v-col>
      <v-col cols="12" sm="12" md="3"> </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.product_overview.certification')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6" class="pl-6">
        <quill-editor
          v-model="certification"
          :options="editorOption"
          class="quill"
          :class="{ focused: selectedEditor === 'certification' }"
          @focus="onEditorFocus($event, 'certification')"
          @blur="onEditorBlur($event)"
          @change="onEditorChange($event, 'certification')"
          v-if="editMode"
        />
        <span v-html="certification" v-else></span>
      </v-col>
      <v-col cols="12" sm="12" md="3"> </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.product_overview.extra_information')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6" class="pl-6">
        <quill-editor
          v-model="extra_information"
          :options="editorOption"
          class="quill"
          :class="{ focused: selectedEditor === 'extra_information' }"
          @focus="onEditorFocus($event, 'extra_information')"
          @blur="onEditorBlur($event)"
          @change="onEditorChange($event, 'extra_information')"
          v-if="editMode"
        />
        <span v-html="extra_information" v-else></span>
      </v-col>
      <v-col cols="12" sm="12" md="3"> </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.product_overview.target_audience')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6" class="pl-6">
        <quill-editor
          v-model="target_audience"
          :options="editorOption"
          class="quill"
          :class="{ focused: selectedEditor === 'target_audience' }"
          @focus="onEditorFocus($event, 'target_audience')"
          @blur="onEditorBlur($event)"
          @change="onEditorChange($event, 'target_audience')"
          v-if="editMode"
        />
        <span v-html="target_audience" v-else></span>
      </v-col>
      <v-col cols="12" sm="12" md="3"> </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">
          Kwaliteitsstandaarden
        </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6" class="pl-6">
        <quill-editor
          v-model="quality_standards"
          :options="editorOption"
          class="quill"
          :class="{ focused: selectedEditor === 'quality_standards' }"
          @focus="onEditorFocus($event, 'quality_standards')"
          @blur="onEditorBlur($event)"
          @change="onEditorChange($event, 'quality_standards')"
          v-if="editMode"
        />
        <span v-html="quality_standards" v-else></span>
      </v-col>
      <v-col cols="12" sm="12" md="3"> </v-col>
    </v-row>
  </accordion-card>
</template>

<script>
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    accordionCard,
    quillEditor,
  },
  props: {
    editMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectedEditor: '',
      editorOption: {
        modules: {
          toolbar: [
            [{ size: ['small', false, 'large'] }],
            ['bold', 'italic'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link'],
          ],
        },
      },
    }
  },
  computed: {
    local() {
      return this.$store.state.learning.local
    },

    short_description: {
      get() {
        return this.local.short_description
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'short_description',
          value,
        })
      },
    },

    learning_goals: {
      get() {
        return this.local.learning_goals
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'learning_goals',
          value,
        })
      },
    },

    review: {
      get() {
        return this.local.review
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'review',
          value,
        })
      },
    },

    certification: {
      get() {
        return this.local.certification
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'certification',
          value,
        })
      },
    },
    extra_information: {
      get() {
        return this.local.extra_information
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'extra_information',
          value,
        })
      },
    },
    target_audience: {
      get() {
        return this.local.target_audience
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'target_audience',
          value,
        })
      },
    },
    quality_standards: {
      get() {
        return this.local.quality_standards
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'quality_standards',
          value,
        })
      },
    },
  },
  methods: {
    onEditorBlur(editor) {
      this.selectedEditor = ''
      // console.log('editor blur!', editor)
    },
    onEditorFocus(editor, nameEditor) {
      this.selectedEditor = nameEditor
    },
    onEditorReady(editor) {
      // console.log('editor ready!', editor)
    },
    onEditorChange(editor, nameEditor) {
      if (this.selectedEditor !== nameEditor) this.selectedEditor = nameEditor
      // console.log('editor change!', editor)
    },
  },
}
</script>

<style scoped>
.v-subheader {
  display: unset;
}
</style>