<template>
  <q-btn
    flat
    square
    unelevated
    padding="0"
    :ripple="false"
    @click="onClickFunction"
    :to="routerTo"
  >
    <div class="main-action-button-content">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="192"
        height="48"
        fill="none"
        viewBox="0 0 192 48"
        v-if="!mini"
      >
        <path
          :fill="item.innerColor"
          fill-opacity=".9"
          :stroke="item.outerColor"
          d="M179.017 34.651v.197l.135.145 11.689 12.5-177.213.007L.5 33.462V3.879L3.653.508 165.932.5l13.085 13.993V34.65Z"
        />
        <path
          :fill="item.outerColor"
          :stroke="item.outerColor"
          d="M179.017 34.651v.197l.135.145L190.848 47.5H13.628L.5 33.461V3.878L3.652.508 165.932.5l13.085 13.993V34.65ZM1.331 32.828v.197l.135.144 12.32 13.213.149.16h.217l161.171-.001h.217l.148-.158 2.363-2.527.135-.144V36.9l-.114-.138-1.905-2.31V20.685l1.904-2.311.114-.139v-3.251l-.132-.143-12.229-13.222-.148-.16h-.219L4.194 1.465h-.217l-.148.158L1.466 4.15l-.135.144v7.267l.115.138L3.35 14.01v13.767l-1.904 2.31-.115.139v2.6Z"
        />
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="61"
        height="48"
        fill="none"
        viewBox="0 0 61 48"
        v-else
      >
        <path
          :fill="item.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="item.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>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="192"
        height="14"
        fill="none"
        viewBox="0 0 192 14"
        style="align-self: end"
        v-if="!mini && !current"
      >
        <path
          :fill="bottomLineColor.innerColor"
          fill-opacity=".9"
          fill-rule="evenodd"
          d="M2.606 0h173.061v.95l2.019 2.39v6.281l-2.363 2.467H14.153L2.605 0Z"
          clip-rule="evenodd"
        />
        <path
          :fill="bottomLineColor.outerColor"
          fill-opacity=".9"
          fill-rule="evenodd"
          d="m0 0 13.412 14H192L180 .95l-.483-.95h-3.85v.95l2.019 2.39v6.281l-2.363 2.467H14.153L2.605 0H0Z"
          clip-rule="evenodd"
        />
      </svg>
      <svg
        width="61"
        height="14"
        viewBox="0 0 61 14"
        fill="none"
        v-if="mini && !current"
        style="align-self: end"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0.5 0.5H48L60.5 14H13.9997L0.5 0.5Z"
          :fill="bottomLineColor.innerColor"
          fill-opacity="0.9"
        />
        <path
          d="M14.414 13L2.91418 1.5H47.5631L58.2112 13H14.414Z"
          :stroke="bottomLineColor.outerColor"
          stroke-opacity="0.9"
          stroke-width="2"
        />
      </svg>

      <div class="absolute-full flex flex-center no-wrap mybutton">
        <q-avatar text-color="white" :icon="icon" square />
        <div v-if="!mini" class="main-action-button-text">{{ item.name }}</div>
      </div>
    </div>
    <q-tooltip>
      {{ item.tooltip }}
    </q-tooltip>
  </q-btn>
</template>

<script>
export default {
  name: "MainActionsButton",
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          name: "NAME",
          innerColor: "#5F8CEA",
          outerColor: "#6666FF",
          color: "blue",
          icon: "simpleCircleIcon.svg",
          tooltip: "NAME",
          action: "",
        };
      },
    },
    bottomLineColor: {
      type: Object,
      default: () => {
        return {
          innerColor: "#5F8CEA",
          outerColor: "#66F",
        };
      },
    },
    current: {
      type: Boolean,
      default: true,
    },
    mini: {
      type: Boolean,
      default: false,
    },
  },
  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>
.main-action-button-content {
  display: grid;
}
.main-action-button-content > svg,
.main-action-button-content > div {
  grid-area: 1/-1;
}
.main-action-button-content > div {
  padding-left: 10px;
  padding-right: 20px;
}

.main-action-button-text {
  margin: auto;
  font-weight: 700;
  font-size: 12px;
}
svg * {
  transition: all 1s;
}
</style>
