<template>
  <div class="module-visibility">
    <h1 class="module-visibility__page-title">Sichtbarkeit</h1>
    <div class="module-visibility__section">
      <p class="module-visibility__paragraph">
        Wollen Sie die angepasste Sichtbarkeit (
        <eye-icon class="module-visibility__inline-icon"/>
        ) von Inhalten einer anderen Klasse übernehmen?
      </p>

    </div>
    <div class="module-visibility__form module-visibility__section">
      Von
      <select
        :value="selectedClassId"
        data-cy="school-class-visibility-dropdown"
        class="skillbox-input skillbox-dropdown module-visibility__dropdown"
        @change="select($event.target.value)">
        <option
          value=""
          selected>-
        </option>
        <option
          :key="schoolClass.id"
          :value="schoolClass.id"
          v-for="schoolClass in schoolClasses">{{ schoolClass.name }}
        </option>
      </select>
      für {{ currentClassName }} übernehmen.
    </div>
    <div class="module-visibility__section">
      <a
        class="button button--primary"
        data-cy="save-visibility-button"
        @click="sync">Anpassungen übernehmen</a>
    </div>
  </div>
</template>

<script>
  import EyeIcon from '@/components/icons/EyeIcon';

  import me from '@/mixins/me';

  import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
  import {MODULE_PAGE} from '@/router/module.names';

  export default {

    mixins: [me],
    components: {
      EyeIcon,
    },

    data() {
      return {
        selectedClassId: '',
      };
    },

    computed: {
      schoolClasses() {
        return this.me.schoolClasses.filter(schoolClass => schoolClass.id !== this.me.selectedClass.id);
      },
      slug() {
        return this.$route.params.slug;
      }
    },

    methods: {
      select(selectedClassId) {
        this.selectedClassId = selectedClassId;
      },
      sync() {
        if (this.selectedClassId) {
          const slug = this.slug;
          this.$apollo.mutate({
              mutation: SYNC_VISIBILITY_MUTATION,
              variables: {
                input: {
                  module: slug,
                  templateSchoolClass: this.selectedClassId,
                  schoolClass: this.me.selectedClass.id,
                },
              },
              refetchQueries: [
                {
                  query: MODULE_DETAILS_QUERY,
                  variables: {
                    slug,
                  },
                },
              ],
            },
          ).then(() => {
            this.$router.push({
              name: MODULE_PAGE,
              params: {
                slug
              }
            });
          });
        }
      },
    },
  };
</script>

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

  .module-visibility {
    @include settings-page;

    margin: 0 auto;

    &__inline-icon {
      width: 25px;
      height: 25px;
      vertical-align: middle;
    }

    &__dropdown {
      width: 200px;
      margin: 0 $medium-spacing;
    }

    &__form {
      display: flex;
      align-items: center;
      @include regular-text;
      font-weight: 600;
    }
  }
</style>
