<!--

 This file is part of the Meeds project (https://meeds.io/).

 Copyright (C) 2020 - 2023 Meeds Association contact@meeds.io

 This program is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser General Public
 License as published by the Free Software Foundation; either
 version 3 of the License, or (at your option) any later version.
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 Lesser General Public License for more details.

 You should have received a copy of the GNU Lesser General Public License
 along with this program; if not, write to the Free Software Foundation,
 Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.

-->
<template>
  <div class="max-width-fit overflow-hidden" :class="[vAlignClass, hAlignClass]">
    <component
      v-if="links?.length"
      :is="isColumn && 'v-list' || 'card-carousel'"
      :class="isColumn && 'pa-0'"
      v-bind="{
        dense: !isColumn || !largeIcon
      }">
      <component
        v-for="link in links"
        :key="link.id"
        :is="componentName"
        :link="link"
        :type="type"
        :show-name="showName"
        :show-description="showDescription"
        :show-icon="showIcon"
        :icon-size="iconSize"
        :large-icon="largeIcon" />
    </component>
  </div>
</template>
<script>
export default {
  props: {
    settings: {
      type: Object,
      default: null,
    },
    links: {
      type: Array,
      default: null,
    },
  },
  computed: {
    type() {
      return this.settings?.type || 'CARD';
    },
    showName() {
      return this.settings?.showName || false;
    },
    showDescription() {
      return this.settings?.showDescription || false;
    },
    showIcon() {
      return this.settings?.showIcon || false;
    },
    iconSize() {
      return this.showIcon && this.settings?.iconSize || (this.settings?.largeIcon && 48 || 34) || 0;
    },
    largeIcon() {
      return this.iconSize > 40;
    },
    header() {
      return this.settings?.header?.[this.$root.language] || this.settings?.header?.[this.$root.defaultLanguage];
    },
    seeMoreUrl() {
      return this.$utils.toLinkUrl(this.settings?.seeMore, {
        urls: true,
        email: true,
        phone: true,
      });
    },
    isColumn() {
      return this.type === 'COLUMN';
    },
    componentName() {
      return this.isColumn && 'links-column' || 'links-card';
    },
    hAlign() {
      return this.settings?.hAlign || 'CENTER';
    },
    vAlign() {
      return this.settings?.vAlign || 'MIDDLE';
    },
    vAlignClass() {
      if (this.vAlign === 'START') {
        return 'mb-auto';
      } else if (this.vAlign === 'END') {
        return 'mt-auto';
      } else {
        return 'my-auto';
      }
    },
    hAlignClass() {
      if (this.hAlign === 'START') {
        return 'me-auto';
      } else if (this.hAlign === 'END') {
        return 'ms-auto';
      } else {
        return 'mx-auto';
      }
    },
  },
};
</script>