<template>
  <div class="visibility-action">
    <a
      class="visibility-action__action-button"
      v-if="canManageContent"
      @click="toggleVisibility()">
      <closed-eye-icon
        class="visibility-action__action-icon action-icon"
        v-if="hidden"/>
      <eye-icon
        class="visibility-action__action-icon action-icon"
        v-else/>
    </a>
  </div>
</template>

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

  import me from '@/mixins/me';

  import {TYPES, CONTENT_TYPE} from '@/consts/types';
  import {createVisibilityMutation, hidden} from '@/helpers/visibility';

  export default {
    props: {
      block: {
        type: Object,
        default: () => ({})
      },
      type: {
        type: String,
        default: CONTENT_TYPE,
        validator: value => {
          // value must be one of TYPES
          return TYPES.indexOf(value) !== -1;
        }
      }
    },

    mixins: [me],

    components: {
      EyeIcon,
      ClosedEyeIcon
    },

    computed: {
      hidden() {
        return hidden({type: this.type, block: this.block, schoolClass: this.schoolClass});
      }
    },

    methods: {
      toggleVisibility() {
        const hidden = !this.hidden;
        const schoolClassId = this.schoolClass.id;

        const visibility = [{
          schoolClassId,
          hidden
        }];

        const {mutation, variables} = createVisibilityMutation(this.type, this.block.id, visibility);

        this.$apollo.mutate({
          mutation,
          variables
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  .visibility-action {
    margin-top: 9px;

    position: absolute;
    left: -70px;
    top: 0px;
    display: grid;

    &__visibility-menu {
      top: 40px;
    }
  }
</style>
