<template>
  <div class="switcher-container">
    <button-component
      @click="updateMode(firstKey)"
      :class="{ active: viewMode == firstKey }"
      classes="btn d-inline-flex px-2 "
      buttonText=""
      :title="text1"
      v-tooltip="text1"
    >
      <template v-if="hasFirstSlot">
        <slot name="firstIcon"></slot>
      </template>

      <template v-else>
        <!-- <span class="tavasi tavasi-table-view"></span> -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.2 19.2">
          <g id="Layer_2" data-name="Layer 2">
            <g id="Layer_1-2" data-name="Layer 1">
              <path
                class="cls-1"
                d="M5.6,0H3.2A3.2,3.2,0,0,0,0,3.2V5.6A3.2,3.2,0,0,0,3.2,8.8H5.6A3.2,3.2,0,0,0,8.8,5.6V3.2A3.2,3.2,0,0,0,5.6,0ZM7.2,5.6A1.6,1.6,0,0,1,5.6,7.2H3.2A1.6,1.6,0,0,1,1.6,5.6V3.2A1.6,1.6,0,0,1,3.2,1.6H5.6A1.6,1.6,0,0,1,7.2,3.2Z"
              ></path>
              <path
                class="cls-1"
                d="M16,0H13.6a3.2,3.2,0,0,0-3.2,3.2V5.6a3.2,3.2,0,0,0,3.2,3.2H16a3.2,3.2,0,0,0,3.2-3.2V3.2A3.2,3.2,0,0,0,16,0Zm1.6,5.6A1.6,1.6,0,0,1,16,7.2H13.6A1.6,1.6,0,0,1,12,5.6V3.2a1.6,1.6,0,0,1,1.6-1.6H16a1.6,1.6,0,0,1,1.6,1.6Z"
              ></path>
              <path
                class="cls-1"
                d="M5.6,10.4H3.2A3.2,3.2,0,0,0,0,13.6V16a3.2,3.2,0,0,0,3.2,3.2H5.6A3.2,3.2,0,0,0,8.8,16V13.6A3.2,3.2,0,0,0,5.6,10.4ZM7.2,16a1.6,1.6,0,0,1-1.6,1.6H3.2A1.6,1.6,0,0,1,1.6,16V13.6A1.6,1.6,0,0,1,3.2,12H5.6a1.6,1.6,0,0,1,1.6,1.6Z"
              ></path>
              <path
                class="cls-1"
                d="M16,10.4H13.6a3.2,3.2,0,0,0-3.2,3.2V16a3.2,3.2,0,0,0,3.2,3.2H16A3.2,3.2,0,0,0,19.2,16V13.6A3.2,3.2,0,0,0,16,10.4ZM17.6,16A1.6,1.6,0,0,1,16,17.6H13.6A1.6,1.6,0,0,1,12,16V13.6A1.6,1.6,0,0,1,13.6,12H16a1.6,1.6,0,0,1,1.6,1.6Z"
              ></path>
            </g>
          </g>
        </svg>
      </template>
    </button-component>
    <button-component
      @click="updateMode(secondKey)"
      :class="{ active: viewMode == secondKey }"
      classes="btn d-inline-flex px-2 "
      buttonText=""
      :title="text2"
      v-tooltip="text2"
    >
      <template v-if="hasSecondSlot">
        <slot name="secondIcon"></slot>
      </template>

      <template v-else>
        <svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>
        <!-- <span class="tavasi tavasi-list-view"></span> -->
      </template>
    </button-component>
    <button-component
    v-if="listState == 2"
      @click="updateMode(thirdKey)"
      :class="{ active: viewMode == thirdKey }"
      classes="btn d-inline-flex px-2 "
      buttonText=""
      :title="text2"
      v-tooltip="text2"
    >
      <template v-if="hasThirdSlot">
        <slot name="thirdIcon"></slot>
      </template>

      <template v-else>
        <svg
          fill="#000000"
          version="1.1"
          id="Capa_1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="800px"
          height="800px"
          viewBox="0 0 35 35"
          xml:space="preserve"
        >
          <g>
            <g>
              <path d="M0,0v35h35V0H0z M33,33H2V2h31V33z" />
              <rect x="4.5" y="4.5" width="11.5" height="26" />
              <rect x="19" y="4.5" width="11.5" height="26" />
            </g>
          </g>
        </svg>
      </template>
    </button-component>
  </div>
</template>

<script>
/**
 * @vue-prop {string} [texts2 = Statistics] - متنی که برای نمایش به عنوان "ChartList" استفاده می‌شود.
 * @vue-prop {string} [texts1 = Normal] - متنی که برای نمایش به عنوان "Chart" استفاده می‌شود.
 *
 * @vue-data {boolean} [textValue = true] - حالت انتخاب شده ی سوئیچ در حالت true فعال و در حالت false غیر فعال می باشد

 * @vue-data {String} [text1 = ""] - متن اول که در برچسب اول نمایش داده می‌شود.
 * @vue-data {String} [text2 = ""] - متن دوم که در برچسب دوم نمایش داده می‌شود.
 */
export default {
  // mixins: [formBuilderMixin],
  // props: ["texts1", "texts2"],
  props: {
    texts2: {
      default: "Statistics",
    },
    texts1: {
      default: "Normal",
    },
    value: {
      default: null,
    },
    firstKey: {
      default: "table",
    },
    secondKey: {
      default: "list",
    },
    thirdKey: {
      default: "three-column-card",
    },
    listState: {
      default: "1",
    },
  },
  data() {
    return {
      viewMode: null,
      text1: "Chart",
      text2: "ChartList",
    };
  },
  computed: {
    hasFirstSlot() {
      return !!this.$slots.firstIcon;
    },
    hasSecondSlot() {
      return !!this.$slots.secondIcon;
    },
    hasThirdSlot() {
      return !!this.$slots.thirdIcon;
    },
  },
  mounted() {
    this.viewMode = this.value ?? this.firstKey;
    this.updateText();
  },
  methods: {
    /**
     * متن‌های پراپ‌ها را به متغیرهای اختصاص می‌دهد.
     * اگر texts1 تعریف شده باشد، مقادیر text1 و text2 را به ترتیب با texts1 و texts2 جایگزین می‌کند.
     */
    updateText() {
      if (this.texts1 !== undefined) {
        this.text1 = this.texts1;
        this.text2 = this.texts2;
      }
    },
    /**
     * رویداد تغییر وضعیت چک‌باکس را مدیریت می‌کند.
     * مقدار جدید textValue را از طریق رویداد "change-mode" به والد کامپوننت ارسال می‌کند.
     */
    updateMode(mode) {
      this.viewMode = mode;
      this.$emit("change-mode", this.viewMode);
    },
  },
};
</script>

<style scoped lang="scss">
.switch-with-icon {
  .switcher-container {
    height: 2.6em;
    width: 10em;
  }
}
.switcher-container {
  background-color: rgb(209, 213, 219);
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  // width: 6em;

  .btn {
    border-radius: 0.5rem;
    border: 0;
    // line-height: 1;
    padding: 0.7em 0.5em;
    transition: all 0.2s;
    &:not(:last-child):nth-child(2) {
      margin-right: 0.3em;
      margin-left: 0.3em;
    }

    svg,
    .tavasi {
      width: 2.1em;
      height: 1em;
      // margin-right: 2px;
      // font-size: 1.6rem;
      color: #fff;
      fill: #fff;
      transition: all 0.2s;
    }
    &.active {
      background-color: var(--primary-color);
      transition: all 0.2s;

      .tavasi {
        color: #fff;
        transition: all 0.2s;

        &::before {
          color: #fff;
          transition: all 0.2s;
        }
      }
    }
  }
}
</style>