const LinksyPageHeader = {
  name: "LinksyPageHeader",
  components: {
    LinksyButton
  },
  props: {
    guideNumber: {
      type: Number,
      default: 1,
    },
    guideLink: {
      type: String,
      default: "",
    },
    guideName: {
      type: String,
      default: "",
    },
    breakpoint: {
      type: String,
      default: 'md',
      validator: (value) => ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
    }
  },
  data() {
    return {
      expanded: false
    }
  },
  computed: {
    toggleButtonClass() {
      return `d-${this.breakpoint}-none`;
    },
    desktopHeaderClass() {
      return `d-none d-${this.breakpoint}-flex`;
    },
    mobileCollapseClass() {
      return `d-flex d-${this.breakpoint}-none`;
    },
    dynamicPaddingClass() {
      return `py-3 py-${this.breakpoint}-0`;
    }
  },
  methods: {
    redirect() {
      if (!this.guideLink) return;
      window.open(this.guideLink, "_blank");
    }
  },
  template: `
    <div class="linksy-page-header bg-white px-4">
      <div :class="['d-flex justify-content-between align-items-center', dynamicPaddingClass]">
        <div :class="['linksy-page-header-title', toggleButtonClass]">
          <slot name="title"></slot>
        </div>

        <linksy-button
          :class="toggleButtonClass"
          variant="white_outline"
          @click="() => expanded = !expanded"
        >
          <i v-if="!expanded" class="fa fa-bars"></i>
          <i v-else class="fa fa-times"></i>
        </linksy-button>

        <div :class="[desktopHeaderClass, 'align-items-center justify-content-between gap-5 flex-grow-1']">
          <div class="d-flex align-items-center gap-2 gap-md-5">
            <div class="linksy-page-header-title">
              <slot name="title"></slot>
            </div>
            <div class="linksy-page-header-tabs">
              <slot name="header-tabs"></slot>
            </div>
          </div>
          <div class="linksy-page-header-actions">
            <slot name="actions"></slot>
          </div>
        </div>
      </div>
    </div>

    <transition name="slide-left">
      <div v-if="expanded" :class="[mobileCollapseClass, 'd-flex justify-content-between align-items-center flex-wrap column-gap-3 bg-white px-4 mt-2']" id="mobileHeaderCollapse">
        <div class="linksy-page-header-tabs">
          <slot name="header-tabs"></slot>
        </div>
        <div class="linksy-page-header-actions">
          <slot name="actions"></slot>
        </div>
      </div>
    </transition>
  `
};
