<template>
  <div class="mc-accordion" :class="classObject">
    <div class="mc-accordion__header">
      <!-- @slot Use this slot to insert content before the label/title -->
      <slot name="beforeLabel"></slot>
      <component :is="titleTag" class="mc-accordion__title">
        <button
          :id="id"
          class="mc-accordion__trigger"
          type="button"
          :aria-controls="`content${id}`"
          :aria-expanded="state.open"
          :disabled="disabled"
          @click="onClick(!state.open)"
        >
          <MIcon v-if="icon" :name="icon" class="mc-accordion__icon" />

          <!-- @slot Use this slot to set custom label/title content -->
          <slot name="label">
            {{ label }}
          </slot>
          <!-- @slot Use this slot to insert content after the label/title -->
          <slot name="afterLabel"></slot>
        </button>
      </component>
    </div>
    <div
      :id="`content${id}`"
      class="mc-accordion__content"
      :aria-hidden="!state.open"
      :aria-labelledby="id"
    >
      <!-- @slot Use this slot to insert the main content of the accordion -->
      <slot />
    </div>
  </div>
</template>

<script>
import MIcon from '../icon/MIcon.vue';

/**
 * > Accordions allow you to show or hide related content under vertically stacked lists.
 *
 * The `MAccordion` component is the **Vue.js** implementation of the **Accordion** component of Mozaic Design System.<br/>
 * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/accordion/).
 */
export default {
  name: 'MAccordion',
  components: {
    MIcon,
  },
  props: {
    /**
     * The id of the accordion.
     * _Used to link the input element and the label element_
     */
    id: {
      type: String,
      required: true,
    },
    /**
     * The label/title of the accordion
     */
    label: {
      type: String,
      default: undefined,
    },
    /**
     * Allows to manage the opening or closing of the component
     */
    open: {
      type: Boolean,
      default: false,
    },
    /**
     * Allows to define the size of the accordion
     * @values s, m
     */
    size: {
      type: String,
      default: null,
      validator: (value) => ['s', 'm'].includes(value),
    },
    /**
     * Allows to disable the accordion
     */
    disabled: {
      type: Boolean,
      default: false,
    },
    /**
     * Allows to display or not the padding of the accordion label
     */
    padding: {
      type: Boolean,
      default: true,
    },
    /**
     * Allows to display an icon before the label of the accordion
     * @see [Available icons](https://mozaic.adeo.cloud/foundations/icons/)
     */
    icon: {
      type: String,
      default: null,
    },
    /**
     * Allows to define the HTML tag to be used for the Accordion's title
     * @values h1, h2, h3, h4, h5, h6
     */
    titleTag: {
      type: String,
      default: 'h2',
    },
  },
  emits: ['update:open'],
  data: function () {
    return {
      state: {
        open: this.open,
      },
    };
  },
  computed: {
    classObject() {
      return {
        [`mc-accordion--${this.size}`]: this.size,
        'is-disabled': this.disabled,
        'is-open': this.state.open,
      };
    },
  },
  watch: {
    open(newState) {
      this.state.open = newState;
    }
  },
  methods: {
    onClick(open) {
      this.state.open = open;

      /**
       * Emits the state value of the "open" prop
       */
      this.$emit('update:open', open);
    },
  },
};
</script>

<style lang="scss" scoped>
@import 'settings-tools/all-settings';
@import 'components/c.accordion';
</style>
