<template>
  <q-expansion-item
    v-model="showing"
    class="border rounded-borders"
    @show="$emit('show', $event)"
    @hide="$emit('hide', $event)"
  >
    <template #header>
      <q-item-section side>
        <q-icon :name="iconName" :color="iconColor" />
      </q-item-section>
      <q-item-section class="text-bold">
        {{ label }}
      </q-item-section>
    </template>
    <div class="q-ma-md">
      <slot />
      <slot name="buttons" />
    </div>
  </q-expansion-item>
</template>

<script>
import { QExpansionItem } from "quasar";
import messageBus from "../../../mixins/messageBus";

export default {
  name: "WCollapsible",
  mixins: [QExpansionItem, messageBus],
  inheritAttrs: true,
  props: {
    label: {
      type: String,
      default: null,
    },
    completed: {
      type: Boolean,
      default: undefined,
    },
    icon: {
      type: String,
      default: null,
    },
    expandIcon: {
      type: String,
      default: "fal fa-pen"
    },
    headerClass: {
      type: String,
      default: "bg-white",
    },
  },
  emits: ["show", "hide"],
  data() {
    return {
      showing: false,
      isCompleted: this.completed,
    };
  },
  computed: {
    iconName() {
      let result;

      if (this.showing) {
        result = this.expandIcon;
      } else if (this.isCompleted === true) {
        result = "fal fa-check-circle";
      } else if (this.isCompleted === false) {
        result = "fal fa-exclamation-circle";
      } else {
        result = this.icon;
      }

      return result;
    },
    iconColor() {
      let result;

      if (this.showing) {
        result = "grey-8";
      } else if (this.isCompleted === true) {
        result = "positive";
      } else if (this.isCompleted === false) {
        result = "negative";
      } else {
        result = "";
      }

      return result;
    },
  },
  mounted() {
    if (this.messageBus) {
      this.messageBus.$on("validated", value => {
        this.isCompleted = value;
      });
    }
  },
};
</script>

