<template>
  <modal>
    <template #header>
      <modal-input
        :placeholder="titlePlaceholder"
        :value="localContentBlock.title"
        :error="error"
        data-cy="modal-title-input"
        @input="updateTitle"
      />
      <checkbox
        :checked="localContentBlock.isAssignment"
        :item="localContentBlock"
        :label="'Auftrag'"
        class="contents-form__task"
        v-if="taskSelection"
        @input="setContentBlockType"
      />
    </template>

    <add-content-element
      :index="-1"
      class="contents-form__add"
      @add-element="addElement"
    />
    <div
      class="contents-form__element"
      v-for="(element, index) in localContentBlock.contents"
      :key="index"
    >
      <content-element
        :element="element"
        @update="update(index, $event)"
        @remove="remove(index)"
      />

      <add-content-element
        :index="index"
        class="contents-form__add"
        @add-element="addElement"
      />
    </div>

    <template #footer>
      <div>
        <a
          :class="{ 'button--disabled': disableSave }"
          class="button button--primary"
          data-cy="modal-save-button"
          @click="save"
          >Speichern</a
        >
        <a
          class="button"
          @click="$emit('hide')"
          >Abbrechen</a
        >
      </div>
    </template>
  </modal>
</template>

<script>
import { defineAsyncComponent } from 'vue';
import { meQuery } from '@/graphql/queries';

const ModalInput = defineAsyncComponent(() =>
  import('@/components/ModalInput.vue')
);
const AddContentElement = defineAsyncComponent(() =>
  import('@/components/AddContentElement.vue')
);
const ContentElement = defineAsyncComponent(() =>
  import('@/components/content-block-form/ContentElement.vue')
);

const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
const Checkbox = defineAsyncComponent(() => import('@/components/ui/Checkbox.vue'));

export default {
  props: {
    contentBlock: Object,
    blockType: {
      type: String,
      default: 'ContentBlock',
    },
    showTaskSelection: {
      type: Boolean,
      default: false,
    },
    disableSave: {
      type: Boolean,
      default: false,
    },
  },

  components: {
    ContentElement,
    Modal,
    ModalInput,
    AddContentElement,
    Checkbox,
  },

  data() {
    return {
      error: false,
      localContentBlock: Object.assign(
        {},
        {
          title: this.contentBlock.title,
          contents: [...this.contentBlock.contents],
          id: this.contentBlock.id || undefined,
          isAssignment: this.contentBlock.type && this.contentBlock.type.toLowerCase() === 'task',
        }
      ),
      me: {},
    };
  },

  apollo: {
    me: meQuery,
  },

  computed: {
    titlePlaceholder() {
      return this.blockType === 'RoomEntry' ? 'Titel für Raumeintrag erfassen' : 'Titel für Inhaltsblock erfassen';
    },
    taskSelection() {
      return this.showTaskSelection && this.me.permissions.includes('users.can_manage_school_class_content');
    },
  },

  methods: {
    setContentBlockType(checked) {
      this.localContentBlock.isAssignment = checked;
    },
    update(index, element) {
      this.localContentBlock.contents.splice(index, 1, element);
    },
    save() {
      if (!this.disableSave) {
        if (!this.localContentBlock.title) {
          this.error = true;
          return false;
        }
        this.$emit('save', this.localContentBlock);
      }
    },
    updateTitle(title) {
      this.localContentBlock.title = title;
      this.error = false;
    },
    addElement(index) {
      this.localContentBlock.contents.splice(index + 1, 0, {
        hideAssignment: this.blockType !== 'ContentBlock',
      });
    },
    remove(index) {
      this.localContentBlock.contents.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="scss">
@import 'styles/helpers';

.contents-form {
  /* top level does not exist, because of the modal */

  &__element {
  }

  &__element-component {
    margin-bottom: 25px;
  }

  &__remove {
  }

  &__trash-icon {
  }

  &__add {
    grid-column: 1 / span 2;
  }

  &__task {
    margin: 15px 0 10px;
  }
}
</style>
