<template>
  <div
    class="class-selection"
    v-if="currentClassSelection">
    <div
      data-cy="class-selection"
      class="class-selection__selected-class selected-class"
      @click="showPopover = !showPopover">
      <current-class class="selected-class__text"/>
      <chevron-down class="selected-class__dropdown-icon"/>
    </div>
    <widget-popover
      :mobile="mobile"
      class="class-selection__popover"
      v-if="showPopover"
      @hide-me="showPopover = false">
      <li
        :key="schoolClass.id"
        :label="schoolClass.name"
        :item="schoolClass"
        data-cy="class-selection-entry"
        class="popover-links__link popover-links__link--large"
        v-for="schoolClass in me.schoolClasses"
        @click="updateSelectedClassAndHidePopover(schoolClass)">
        {{ schoolClass.name }}
      </li>
      <li
        class="popover-links__link popover-links__link--large popover-links__divider"
        data-cy="create-class-link"
        v-if="me.isTeacher && !me.readOnly"
        @click="closeSidebar">
        <router-link
          :to="{name: 'create-class'}"
          tag="span"
          class="popover-links__link-with-icon"
        >
          <add-icon class="popover-links__icon"/>
          <span>Klasse erfassen</span>
        </router-link>
      </li>
      <li
        class="popover-links__link popover-links__link--large popover-links__divider"
        @click="closeSidebar">
        <router-link
          :to="{name: 'old-classes'}"
          tag="span">Alte Klassen anzeigen</router-link>
      </li>
    </widget-popover>
  </div>
</template>

<script>
  import WidgetPopover from '@/components/ui/WidgetPopover';
  import ChevronDown from '@/components/icons/ChevronDown';
  import CurrentClass from '@/components/school-class/CurrentClass';
  import AddIcon from '@/components/icons/AddIcon';

  import updateSelectedClassMixin from '@/mixins/update-selected-class';
  import sidebarMixin from '@/mixins/sidebar';
  import meMixin from '@/mixins/me';

  export default {

    props: {
      mobile: {
        type: Boolean,
        default: false
      }
    },

    mixins: [updateSelectedClassMixin, sidebarMixin, meMixin],
    components: {
      WidgetPopover,
      ChevronDown,
      CurrentClass,
      AddIcon
    },

    data() {
      return {
        showPopover: false
      };
    },

    computed: {
      currentClassSelection() {
        let currentClass = this.me.schoolClasses.find(schoolClass => {
          return schoolClass.id === this.me.selectedClass.id;
        });
        return currentClass || this.me.schoolClasses[0];
      }
    },

    methods: {
      updateSelectedClassAndHidePopover(selectedClass) {
        this.updateSelectedClass(selectedClass);
        this.showPopover = false;
        this.closeSidebar();
      }
    },

  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .class-selection {
    position: relative;
    cursor: pointer;
    margin-bottom: $medium-spacing;
    border-radius: 4px;

    &__popover {
      white-space: nowrap;
      top: 100%;
      left: 0;
      transform: translateY($small-spacing);
    }

  }

  .selected-class {
    width: 100%;
    box-sizing: border-box;
    padding: $small-spacing 0;

    display: flex;
    align-items: center;
    justify-content: start;

    &__text {
      line-height: $large-spacing;
      @include heading-4;
      margin-right: $small-spacing;
    }

    &__dropdown-icon {
      width: 20px;
      height: 20px;
      fill: $color-charcoal-dark;
    }
  }
</style>
