<template>
  <el-skeleton v-show="loading" animated class="am-skeleton-payment">
    <template #template>
      <div class="am-skeleton-payment-heading">
        <el-skeleton-item variant="h3" />
      </div>
      <div class="am-skeleton-payment-booking-info">
        <div
          v-for="(item, i) in new Array(9)"
          :key="item"
          :class="{
            'am-skeleton-border-dashed': i < 5,
            'am-skeleton-border-solid': [5, 7].includes(i),
          }"
        >
          <el-skeleton-item
            variant="text"
            :style="{ width: `${useRandomIntFromInterval(25, 28)}%` }"
          />
          <el-skeleton-item
            v-if="i === 5"
            variant="text"
            :style="{ width: '35%', height: i === 5 ? '32px' : '', margin: '8px 0' }"
          />
          <el-skeleton-item
            variant="text"
            :style="{
              width: `${useRandomIntFromInterval(25, 28)}%`,
              height: i === 5 ? '32px' : '',
            }"
          />
        </div>
      </div>
      <el-skeleton-item
        variant="h3"
        :style="{ width: '100%', height: '48px', marginTop: '20px' }"
      />
      <el-skeleton-item
        variant="h3"
        :style="{ width: '116px', height: '26px', marginTop: '16px' }"
      />
      <div
        :style="{
          marginTop: '20px',
          display: 'flex',
          justifyContent: 'space-between',
          flexDirection: 'row',
        }"
      >
        <el-skeleton-item
          v-for="i in new Array(3)"
          :key="i"
          variant="h3"
          :style="{ width: '30%', height: '48px' }"
        />
      </div>
    </template>
  </el-skeleton>
</template>

<script setup>
// * Import from Vue
import { computed } from 'vue'
// * Import from Store
import { useStore } from 'vuex'
// * Compsables
import { useRandomIntFromInterval } from '../../../assets/js/common/formatting'

const store = useStore()

let bookableType = computed(() => store.getters['bookableType/getType'])

let loading = computed(() => {
  if (bookableType.value === 'event') {
    return store.getters['getLoading']
  }

  return store.getters['booking/getLoading']
})
</script>

<script>
export default {
  name: 'BookingSkeleton',
}
</script>

<style lang="scss">
.amelia-v2-booking #amelia-container {
  .am-skeleton-payment {
    padding: 0;

    &-heading {
      .el-skeleton__item {
        height: 24px;
        width: 100px;
      }
    }

    &-booking-info {
      align-items: center;
      padding: 16px 0;
      & > div {
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &.am-skeleton-border-dashed {
          border-bottom: 1px solid var(--am-c-skeleton-op20);
          border-bottom-style: dashed;
        }

        &.am-skeleton-border-solid {
          border-bottom: 1px solid var(--am-c-skeleton-op20);
        }

        .el-skeleton__item {
          height: 20px;
        }
      }
    }
  }
}
</style>
