<template>
  <q-btn
    flat
    square
    unelevated
    padding="0"
    :ripple="false"
    @click="onClickFunction"
    :to="routerTo"
  >
    <div class="header-button-content">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        fill="none"
        viewBox="0 0 48 48"
        v-if="last"
      >
        <path
          :fill="color.outerColor"
          fill-rule="evenodd"
          d="M0 33.659 14.344 48h29.982L48 44.324v-30.03L33.7 0 3.674.009 0 3.682V33.66Z"
          clip-rule="evenodd"
        />
        <path
          :fill="color.innerColor"
          fill-opacity=".9"
          fill-rule="evenodd"
          d="m1.959 32.828 13.224 13.221h28.29L46 43.523V37.09l-2.16-2.45V20.516l2.16-2.45V15.19L32.776 1.969H4.486L1.959 4.493v6.89l2.159 2.448v14.126l-2.16 2.449v2.421Z"
          clip-rule="evenodd"
        />
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="61"
        height="48"
        fill="none"
        viewBox="0 0 61 48"
        v-else
      >
        <path
          :fill="color.outerColor"
          fill-opacity=".9"
          fill-rule="evenodd"
          d="M-.624 33.657 13.713 48l46.942.009L47.31 34.658l.042-20.368L33.06-.009 3.05.001-.624 3.673v29.983Zm1.958-.831L14.552 46.05h28.275l2.526-2.527v-6.435l-2.158-2.45V20.512l2.158-2.45v-2.877L32.135 1.96 3.86 1.959 1.334 4.486v6.89l2.158 2.45v14.129l-2.158 2.449v2.422Z"
          clip-rule="evenodd"
        />
        <path
          :fill="color.innerColor"
          fill-opacity=".9"
          fill-rule="evenodd"
          d="M1.334 32.826 14.552 46.05h28.275l2.526-2.527v-6.435l-2.159-2.45V20.512l2.158-2.45v-2.877L32.136 1.96 3.86 1.959 1.334 4.486v6.89l2.158 2.45v14.129l-2.158 2.449v2.422Z"
          clip-rule="evenodd"
        />
      </svg>
      <div
        class="absolute-full flex flex-center mybutton"
        :class="{ 'header-button-wide': !last }"
      >
        <q-avatar
          text-color="white"
          :icon="icon"
          square
          style="font-size: 28px !important"
        />
      </div>
    </div>
    <q-tooltip>
      {{ item.tooltip }}
    </q-tooltip>
  </q-btn>
</template>

<script>
export default {
  name: "HeaderButton",
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          name: "NAME",
          innerColor: "#5F8CEA",
          outerColor: "#6666FF",
          color: "blue",
          icon: "simpleCircleIcon.svg",
          tooltip: "NAME",
          action: "",
        };
      },
    },
    last: { type: Boolean, default: false },
    color: {
      type: Object,
      default: () => {
        return {
          innerColor: "#8282BF",
          outerColor: "#4A4AFF",
          color: "blue",
        };
      },
    },
  },
  setup() {
    return {};
  },
  computed: {
    routerTo() {
      if (this.item.action) {
        if (typeof this.item.action === "string") {
          return this.item.action;
        }
      }
      return "";
    },
    onClickFunction() {
      if (this.item.action) {
        if (typeof this.item.action === "function") {
          return this.item.action;
        }
      }
      return "";
    },
    icon() {
      if (this.item.icon) {
        const arr = this.item.icon.split(".");
        if (arr.length === 1) {
          return this.item.icon;
        }
        if (arr.length > 1) {
          return "img:" + this.item.icon;
        }
      }
      return null;
    },
  },
};
</script>
<style scoped>
.header-button-content {
  display: grid;
}
.header-button-content > svg,
.header-button-content > div {
  grid-area: 1/-1;
}
.header-button-wide {
  padding-right: 14px;
}

.header-button-text {
  margin: auto;
}
svg * {
  transition: all 1s;
}
</style>
