<template>
  <div class="cpTableFooter">
    <cp-table-footer-desktop
      class="cpTableFooter__desktop"
      :is-next-enabled="isNextEnabled"
      :is-previous-enabled="isPreviousEnabled"
      @on-next-click="emit('onNextClick')"
      @on-previous-click="emit('onPreviousClick')"
    >
      <template #footer-details>
        <slot v-if="!isLoading" name="footer-details">
          <cp-table-footer-details
            :number-of-results="numberOfResults"
            :page-first-result-index="pageFirstResultIndex"
            :page-last-result-index="pageLastResultIndex"
          />
        </slot>
        <span v-else class="cpTableFooter__loader">
          Loading
          <cp-loader color="neutral" size="xs" />
        </span>
      </template>
    </cp-table-footer-desktop>

    <cp-table-footer-mobile
      class="cpTableFooter__mobile"
      :is-next-enabled="isNextEnabled"
      :is-previous-enabled="isPreviousEnabled"
      @on-next-click="emit('onNextClick')"
      @on-previous-click="emit('onPreviousClick')"
    >
      <template #footer-details>
        <slot v-if="!isLoading" name="footer-details">
          <cp-table-footer-details
            :number-of-results="numberOfResults"
            :page-first-result-index="pageFirstResultIndex"
            :page-last-result-index="pageLastResultIndex"
          />
        </slot>
        <span v-else class="cpTableFooter__loader">
          Loading
          <cp-loader color="neutral" size="xs" />
        </span>
      </template>
    </cp-table-footer-mobile>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import CpTableFooterDesktop from '@/components/CpTableFooterDesktop.vue'
import CpTableFooterDetails from '@/components/CpTableFooterDetails.vue'
import CpTableFooterMobile from '@/components/CpTableFooterMobile.vue'

interface Props {
  isLoading: boolean
  isServerSidePagination: boolean
  numberOfResults: number
  pageNumber: number
  rowsPerPageLimit: number
  serverActivePage: number
}

interface Emits {
  (evt: 'onNextClick' | 'onPreviousClick'): void
}

const props = defineProps<Props>()

const emit = defineEmits<Emits>()

const numberOfPages = computed(() => Math.ceil(props.numberOfResults / props.rowsPerPageLimit))
const activePage = computed(() => (props.isServerSidePagination ? props.serverActivePage + 1 : props.pageNumber + 1))
const hasRemainingPages = computed(() => numberOfPages.value > activePage.value)
const hasPreviousPages = computed(() => {
  return props.isServerSidePagination ? props.serverActivePage > 0 : props.pageNumber > 0
})

const isNextEnabled = computed(() => hasRemainingPages.value && !props.isLoading)
const isPreviousEnabled = computed(() => hasPreviousPages.value && !props.isLoading)

const pagesStartIndex = computed(() => props.pageNumber * props.rowsPerPageLimit)
const pagesEndIndex = computed(() => props.rowsPerPageLimit * (1 + props.pageNumber))
const serverPagesStartIndex = computed(() => props.serverActivePage * props.rowsPerPageLimit + 1)
const serverPagesEndIndex = computed(() => props.rowsPerPageLimit * (1 + props.serverActivePage))

const pageFirstResultIndex = computed(() => {
  return props.isServerSidePagination ? serverPagesStartIndex.value : pagesStartIndex.value + 1
})

const pageLastResultIndex = computed(() => {
  const endIndex = props.isServerSidePagination ? serverPagesEndIndex.value : pagesEndIndex.value
  return hasRemainingPages.value ? endIndex : props.numberOfResults
})
</script>

<style scoped lang="scss">
.cpTableFooter {
  z-index: auto;
  padding: var(--cp-spacing-xl) var(--cp-spacing-lg) 0;

  &__loader {
    display: inline-flex;
    align-items: center;
    color: var(--cp-text-secondary);
    font-size: var(--cp-text-size-sm);
    gap: var(--cp-spacing-sm);
    line-height: var(--cp-line-height-sm);
  }

  &__desktop {
    display: flex;
  }

  &__mobile {
    display: none;
    margin-block: var(--cp-spacing-lg);

    .cpTableFooter__loader {
      font-size: var(--cp-text-size-xs);
      line-height: var(--cp-line-height-xs);
    }
  }
}

@media (max-width: 768px) {
  .cpTableFooter {
    padding: 0 var(--cp-spacing-lg) 0;

    &__desktop {
      display: none;
    }

    &__mobile {
      display: flex;
    }
  }
}
</style>
