<template>
  <div v-if="!empty" ref="ameliaContainer" class="am-fcl" role="list" :style="cssVars">
    <template v-for="category in categoriesList" :key="category.id">
      <div class="am-fcl__item" role="listitem" :class="itemWidth">
        <div
          class="am-fcl__item-inner"
          role="group"
          :aria-labelledby="getCategoryTitleId(category)"
        >
          <div
            class="am-fcl__item-content"
            :style="
              customizedOptions.cardSideColor.visibility
                ? {
                    borderLeft: '7px solid',
                    borderLeftColor: category.color,
                  }
                : {}
            "
          >
            <div
              class="am-fcl__item-heading"
              :style="
                customizedOptions.cardColor && customizedOptions.cardColor.visibility
                  ? {
                      backgroundColor: useColorTransparency(category.color, 0.1),
                    }
                  : {}
              "
            >
              <div
                v-if="category.pictureFullPath"
                :style="{ backgroundImage: `url(${category.pictureFullPath})` }"
                class="am-fcl__item-hero"
                aria-hidden="true"
              ></div>
              <div :id="getCategoryTitleId(category)" class="am-fcl__item-name">
                {{ category.name }}
              </div>
              <div class="am-fcl__item-segments">
                <div
                  v-if="
                    (!preselected.show || preselected.show === 'services') &&
                    customizedOptions.services.visibility
                  "
                  class="am-fcl__item-segments__item"
                >
                  <span class="am-fcl__sr-only">{{ getServicesCountLabel(category) }}</span>
                  <span
                    class="am-fcl__item-segments__item-icon am-icon-service"
                    aria-hidden="true"
                  ></span>
                  <span class="am-fcl__item-segments__item-count" aria-hidden="true">
                    {{ getServicesCount(category) }}
                  </span>
                </div>
                <div
                  v-if="
                    (!preselected.show || preselected.show === 'packages') &&
                    getPackagesCount(category) &&
                    customizedOptions.packages.visibility
                  "
                  class="am-fcl__item-segments__item"
                >
                  <span class="am-fcl__sr-only">{{ getPackagesCountLabel(category) }}</span>
                  <span
                    class="am-fcl__item-segments__item-icon am-icon-shipment"
                    aria-hidden="true"
                  ></span>
                  <span class="am-fcl__item-segments__item-count" aria-hidden="true">
                    {{ getPackagesCount(category) }}
                  </span>
                </div>
              </div>
            </div>
            <div class="am-fcl__item-footer">
              <AmButton
                class="am-fcl__item-btn"
                size="mini"
                category="secondary"
                :type="customizedOptions.cardButton.buttonType"
                :suffix="IconArrowRight"
                :aria-label="getChooseCategoryLabel(category)"
                @click="chooseCategory(category.id)"
              >
                {{ amLabels.view_all }}
              </AmButton>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
  <div v-else ref="ameliaContainer" class="am-empty" role="status" aria-live="polite">
    <img
      :src="baseUrls.wpAmeliaPluginURL + '/v3/src/assets/img/am-empty-booking.svg'"
      :alt="
        preselected.show !== 'packages'
          ? amLabels.no_services_employees
          : amLabels.no_package_services
      "
      aria-hidden="true"
    />
    <div class="am-empty__heading">
      {{ amLabels.oops }}
    </div>
    <div class="am-empty__subheading">
      {{
        preselected.show !== 'packages'
          ? amLabels.no_services_employees
          : amLabels.no_package_services
      }}
    </div>
    <div class="am-empty__text">
      <span v-if="preselected.show !== 'packages'">
        {{ amLabels.add_services_employees }}&nbsp;
      </span>
      <a href="https://wpamelia.com/services-and-categories/" rel="nofollow">
        {{ amLabels.add_services_url }}&nbsp;
      </a>
      <span v-if="preselected.show !== 'packages'"> {{ amLabels.and }}&nbsp; </span>
      <a
        v-if="preselected.show !== 'packages'"
        href="https://wpamelia.com/employees/"
        rel="nofollow"
      >
        {{ amLabels.add_employees_url }}
      </a>
    </div>
  </div>
</template>

<script setup>
import AmButton from '../../../_components/button/AmButton.vue'
import IconArrowRight from '../../../_components/icons/IconArrowRight'

// * Vue
import { ref, computed, inject, reactive, onMounted, onBeforeUnmount } from 'vue'

// * Store
import { useStore } from 'vuex'

// * Composables
import { useAvailableServiceIdsInCategory } from '../../../../assets/js/public/catalog.js'
import { useColorTransparency } from '../../../../assets/js/common/colorManipulation.js'
import useAction from '../../../../assets/js/public/actions'

// * Root Urls
const baseUrls = inject('baseUrls')

// * Component reference
let ameliaContainer = ref(null)

// * Plugin wrapper width
let containerWidth = ref(0)

// * resize function
function resize() {
  if (ameliaContainer.value) {
    containerWidth.value = ameliaContainer.value.offsetWidth
  }
}

onMounted(() => {
  window.addEventListener('resize', resize)

  if (ameliaContainer.value) {
    containerWidth.value = ameliaContainer.value.offsetWidth
  }
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
})

let itemWidth = computed(() => {
  if (containerWidth.value <= 500) {
    return 'am-w100'
  }

  if (containerWidth.value <= 600) {
    return 'am-w50'
  }

  if (containerWidth.value <= 768) {
    return 'am-w33'
  }

  return ''
})

// * Step functionality
let { nextPage } = inject('changingPageFunctions', {
  nextPage: () => {},
})

// * Root Settings
const amSettings = inject('settings')

// * Store
let store = useStore()

// * Entities
let amEntities = inject('amEntities')

// * Customized data
let customizedDataForm = inject('customizedDataForm')

// * Customized options
let customizedOptions = computed(() => {
  return customizedDataForm.value.categoriesList.options
})

// * Shortcode
const shortcodeData = inject('shortcodeData')
const preselected = computed(() => store.getters['entities/getPreselected'])

let availableCategories = inject('availableCategories')
let categoriesList = computed(() => availableCategories.value)

let categorySelected = inject('categorySelected')
function chooseCategory(id) {
  categorySelected.value = id
  store.commit('booking/setCategoryId', parseInt(id))

  useAction(store, {}, 'SelectCategory', 'appointment', null, null)

  nextPage()
}

// * Empty state
let empty = computed(() => {
  return categoriesList.value.length === 0
})

// * labels
const labels = inject('labels')

// * local language short code
const localLanguage = inject('localLanguage')

// * if local lang is in settings lang
let langDetection = computed(() => amSettings.general.usedLanguages.includes(localLanguage.value))

// * Computed labels
let amLabels = computed(() => {
  let computedLabels = reactive({ ...labels })

  if (amSettings.customizedData?.cbf?.categoriesList?.translations) {
    let customizedLabels = amSettings.customizedData.cbf.categoriesList.translations
    Object.keys(customizedLabels).forEach((labelKey) => {
      if (customizedLabels[labelKey][localLanguage.value] && langDetection.value) {
        computedLabels[labelKey] = customizedLabels[labelKey][localLanguage.value]
      } else if (customizedLabels[labelKey].default) {
        computedLabels[labelKey] = customizedLabels[labelKey].default
      }
    })
  }
  return computedLabels
})

function getCategoryTitleId(category) {
  return `am-category-${category.id}-title`
}

function getLabel(key, fallback) {
  return amLabels.value[key] || fallback
}

function getServicesCount(category) {
  if (Array.isArray(category.serviceIdList)) {
    return category.serviceIdList.length
  }

  if (
    !Array.isArray(category.serviceList) ||
    !Array.isArray(amEntities?.employees) ||
    !amEntities?.entitiesRelations
  ) {
    return 0
  }

  return useAvailableServiceIdsInCategory(shortcodeData, category, amEntities).length
}

function getPackagesCount(category) {
  return Array.isArray(category.packageList) ? category.packageList.length : 0
}

function getServicesCountLabel(category) {
  let count = getServicesCount(category)

  return `${count} ${count === 1 ? getLabel('service', 'service') : getLabel('services', 'services')}`
}

function getPackagesCountLabel(category) {
  let count = getPackagesCount(category)

  return `${count} ${count === 1 ? getLabel('package', 'package') : getLabel('packages', 'packages')}`
}

function getChooseCategoryLabel(category) {
  return `${getLabel('view_all', 'View all')} ${category.name}`
}

// * Colors
let amColors = inject('amColors')
let cssVars = computed(() => {
  return {
    '--am-c-fcl-card-text-op80': useColorTransparency(amColors.value.colorCardText, 0.8),
  }
})
</script>

<script>
export default {
  name: 'CategoriesList',
  key: 'categoriesList',
}
</script>

<style lang="scss">
.amelia-v2-booking #amelia-container.am-fc__wrapper {
  .am-fcl {
    // -fcl- form category list
    // -ff- font family
    --am-c-fcl-primary: var(--am-c-primary);
    --am-c-fcl-bgr: var(--am-c-main-bgr);
    --am-c-fcl-card-bgr: var(--am-c-card-bgr);
    --am-c-fcl-card-border: var(--am-c-card-border);
    --am-c-fcl-card-text: var(--am-c-card-text);
    --am-ff-fcl: var(--am-font-family);
    display: flex;
    align-items: unset;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    background-color: var(--am-c-main-bgr);
    border-radius: 12px;

    * {
      font-family: var(--am-ff-fcl);
      box-sizing: border-box;
    }

    &__sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    &__item {
      max-width: 25%;
      width: 100%;
      display: flex;
      background-color: transparent;
      padding: 8px;

      &.am-w33 {
        max-width: 33.33333%;
      }

      &.am-w50 {
        max-width: 50%;
      }

      &.am-w100 {
        max-width: 100%;
      }

      &-inner {
        display: flex;
        width: 100%;
        background-color: transparent;
        border: 1px solid var(--am-c-fcl-card-border);
        border-radius: 8px;
        overflow: hidden;
      }

      &-content {
        position: relative;
        display: flex;
        width: 100%;
        background-color: var(--am-c-fcl-card-bgr);
        padding: 0 0 52px;
      }

      &-hero {
        padding: 56.25% 0 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 4px;
        margin: 0 0 8px;
      }

      &-heading {
        width: 100%;
        padding: 12px;
      }

      &-name {
        width: 100%;
        font-family: var(--am-ff-fcl);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.6;
        color: var(--am-c-fcl-card-text);
        margin: 0 0 12px;
        display: -webkit-box;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &-segments {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;

        &__item {
          display: flex;
          align-items: center;
          height: 18px;

          &:first-child {
            margin-right: 4px;
          }

          &-icon {
            font-size: 24px;
            color: var(--am-c-fcl-primary);
          }

          &-count {
            font-family: var(--am-ff-fcl);
            font-size: 13px;
            font-weight: 400;
            line-height: 1.3846;
            color: var(--am-c-fcl-card-text-op80);
          }
        }
      }

      &-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 12px;
      }

      &-btn {
        width: 100%;
      }
    }
  }
}
</style>
