<template>
  <div
    v-if="items.length > 1"
    class="pagination"
  >
    <div class="previous">
      <button
        class="pagination-button"
        :class="{ disable: currentIndex === 0 }"
        @click="handlePreviousButtonClick"
      >
        <ui-icon icon="chevron_left" />
        <span>Prev Image</span>
      </button>
    </div>
    <div class="page">
      {{ currentIndex + 1 }} of {{ items.length }}
    </div>
    <div class="next">
      <button
        class="pagination-button pagination-button__left"
        :class="{ disable : currentIndex === (items.length - 1) }"
        @click="handleNextButtonClick"
      >
        <span>Next Image</span>
        <ui-icon icon="chevron_right" />
      </button>
    </div>
  </div>
</template>
<script>
const { UiIcon } = window.kiln.utils.components;

export default {
  components: {
    UiIcon
  },
  props: {
    currentIndex: {
      type: Number,
      default: () => 0
    },
    items: {
      type: Array,
      default: () => []
    },
    onPreviousClick: {
      type: Function,
      default: () => {}
    },
    onNextClick: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    /**
     * Handles on click event for "previous" button
     */
    handlePreviousButtonClick() {
      this.$emit('onPreviousClick');
    },
    /**
     * Handles on click event for "next" button
     */
    handleNextButtonClick() {
      this.$emit('onNextClick');
    }
  }
};
</script>
<style lang="scss" scoped>
  @import 'Styles/colors.scss';
  @import 'Styles/fonts.scss';

  .pagination {
    display: flex;
    margin: 0 40px 40px;

    .ui-button {
      background: none;
      height: auto;
      padding: 0;
    }

    .ui-button:hover:not(.is-disabled) {
      background: none;
    }

    .pagination-button {
      @extend .title;

      align-items: center;
      background: none;
      border: 0;
      color: $border-color-darker;
      cursor: pointer;
      display: flex;
      font-weight: bold;
      padding: 0;

      &__left {
        margin-left: auto;
      }

      &.disable {
        color: $disable-color--medium;
      }
    }

    .ui-button__icon {
      margin: 0;
    }

    .previous,
    .page,
    .next {
      flex: 1;
      line-height: normal;
    }

    .page {
      font-size: 14px;
      text-align: center;
    }

    .next {
      text-align: right;
    }
  }
</style>
