<template>
  <transition appear enter-active-class="animated slideRight">
    <q-card class="w-card w-action-card cursor-pointer" flat bordered>
      <div v-if="loading" class="column full-height justify-center items-center">
        <q-spinner size="3em" color="grey-4" />
      </div>
      <template v-else>
        <q-img v-if="imgSrc" loading="eager" :src="imgSrc" :ratio="16/9" transition="fade" />
        <div v-if="(chipLeft || chipRight || month || day)" class="absolute full-width row items-end chip-section q-px-sm">
          <q-card v-if="month || day" class="calendar q-py-sm q-ml-sm">
            <div class="column full-height justify-center items-center">
              <div class="month">
                {{ month }}
              </div>
              <div class="day">
                {{ day }}
              </div>
            </div>
          </q-card>
          <div v-if="chipLeft" class="col-auto text-left">
            <q-chip square dense :color="chipLeftColor" :style="chipStyle">
              {{ chipLeft }}
            </q-chip>
          </div>
          <div v-if="chipRight" class="col text-right">
            <q-chip square dense :color="chipRightColor" :style="chipStyle">
              {{ chipRight }}
            </q-chip>
          </div>
        </div>
        <q-card-section v-if="title || subtitle">
          <div v-if="subtitle" class="subtitle">
            {{ subtitle }}
          </div>
          <div v-if="title" class="title">
            {{ title }}
          </div>
        </q-card-section>
        <q-card-section v-if="details" class="details">
          <div class="column">
            <div v-for="(detail, detailIndex) in details" :key="detailIndex" class="row full-width">
              <div class="col-auto q-pr-sm">
                <q-icon :name="detail.icon" />
              </div>
              <div class="col text-caption" :class="{ 'ellipsis': detailsEllipsis }">
                {{ detail.text }}
              </div>
            </div>
          </div>
        </q-card-section>
        <div class="absolute-bottom q-px-md q-py-sm">
          <slot name="footer" />
        </div>
      </template>
    </q-card>
  </transition>
</template>

<script>
import { QCard } from "quasar";

export default {
  name: "WActionCard",
  mixins: [QCard],
  inheritAttrs: true,
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    imgSrc: {
      type: String,
      default: null,
    },
    title: {
      type: String,
      default: null,
    },
    subtitle: {
      type: String,
      default: null,
    },
    chipLeft: {
      type: String,
      default: null,
    },
    chipRight: {
      type: String,
      default: null,
    },
    chipLeftColor: {
      type: String,
      default: null,
    },
    chipRightColor: {
      type: String,
      default: null,
    },
    chipTextColor: {
      type: String,
      default: "white",
    },
    month: {
      type: String,
      default: null,
    },
    day: {
      type: String,
      default: null,
    },
    details: {
      type: Array,
      default: () => [],
    },
    detailsEllipsis: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    chipStyle() {
      return {
        color: this.chipTextColor,
      };
    },
  },
};
</script>
