<template>
  <div class="container-fluid">
    <!-- <div class="row">
      <div class="col-auto">
        <label for="">وضعیت رنگی کردن متن: </label>
      </div>
      <div class="col-3">
        <div class="d-flex">
          <switch-with-icon
            @change-mode="switchViewMode($event)"
            texts1="فعال"
            texts2="غیر فعال"
            firstKey="show"
            secondKey="hidden"
            value="show"
          >
            <div #firstIcon>
              <svg class="icon icon-Highlighter">
                <use xlink:href="#icon-Highlighter"></use>
              </svg>
            </div>
            >
            <div #secondIcon>
              <svg class="icon icon-Group-7404">
                <use xlink:href="#icon-Group-7404"></use>
              </svg>
            </div>
          </switch-with-icon>

           <div class="switcher-container">
          <button-component
            @click="switchViewMode('show')"
            :class="{ active: viewMode === 'show' }"
            classes="btn d-inline-flex px-2 "
            buttonText=""
            title="رنگی کردن"
            v-tooltip="'رنگی کردن'"
          >
            <svg class="icon icon-Highlighter">
              <use xlink:href="#icon-Highlighter"></use>
            </svg>
          </button-component>
          <button-component
            @click="switchViewMode('hidden')"
            :class="{ active: viewMode === 'hidden' }"
            classes="btn d-inline-flex px-2 "
            buttonText=""
            title=" پنهان کردن "
            v-tooltip="' پنهان کردن '"
          >
            <svg class="icon icon-Group-7404">
              <use xlink:href="#icon-Group-7404"></use>
            </svg>
          </button-component> 
          </div>
        </div>
      </div>
    </div> -->
    <div class="row mt-5">
      <div class="col-auto">
        <label for="">نحوه نمایش تغییرات :</label>
      </div>
      <div class="col-12 col-md-3">
        <USelectMenu
          :popper="{ placement: 'left-end' }"
          option-attribute="label"
          placeholder="انتخاب کنید"
          v-model="fieldOne"
          :options="currentSelectItem"
          @update:model-value="onSelectTanghih()"
        >
        </USelectMenu>
        <!-- <multiselect
          :allow-empty="false"
          :searchable="true"
          :close-on-select="true"
          :show-labels="false"
          label="label"
          track-by="key"
          placeholder="انتخاب"
          v-model="currentSelectItem"
          :options="options"
          @select="onSelectTanghih"
          :hide-selected="false"
          :max-height="200"
          :width="50"
          openDirection="rtl"
          id="repositories-desktop"
          class="multiselect"
        >
        </multiselect> -->
      </div>
    </div>
    <div class="d-flex justify-content-end mt-5">
      <button @click.prevent="save()" type="button" class="btn button">
        ذخیره
      </button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "pinia";
import { useCommonStore } from "~/stores/commonStore";

export default {
  mounted() {
    if (this.isShowHilightGetter) this.viewMode = "show";
    else this.viewMode = "hidden";

    if (this.diffTypeGetter) {
      this.options.forEach((element) => {
        if (element.key == this.diffTypeGetter) {
          this.currentSelectItem = element;
          this.onSelectTanghih(element);
        }
      });
    }
    // this.currentSelectItem = this.options[0];
    // this.onSelectItem(this.options[0]);
  },
  data() {
    return {
      viewMode: "show",
      currentSelectItem: { label: "متن نهایی", key: "noChange" },
      options: [
        {
          label: "متن نهایی",
          key: "noChange",
        },
        {
          label: "ادغام تغییرات",
          key: "mergeChange",
        },
        {
          label: "مقایسه حرف به حرف",
          key: "diffChars",
        },
        {
          label: "مقایسه کلمه به کلمه",
          key: "diffWords",
        },
      ],
    };
  },
  computed: {
    ...mapState(useCommonStore, ["isShowHilightGetter",'diffTypeGetter']),
  },
  methods: {
    ...mapActions(useCommonStore, ["isShowHilightSetter","diffTypeSetter"]),
    switchViewMode(viewMode) {
      this.viewMode = viewMode;
      if (viewMode == "show") this.isShowHilightSetter(true);
      else this.isShowHilightSetter(false);
    },
    onSelectTanghih(event) {
      //console.log("🚀 ~ onSelectTanghih ~ event:", event);
      this.diffTypeSetter(event.key);
    },
  },
};
</script>

<style lang="scss" scoped>
// .switcher-container {
//   border: 1px solid #bac4ce;
//   // border-radius: 0.7em;
//   width: 6em;
//   .btn {
//     // border-radius: 0.7em;
//     border: 0;
//     &.active {
//       background-color: var(--primary-color);

//       .tavasi {
//         color: #fff;
//         &::before {
//           color: #fff;
//         }
//       }
//     }
//   }
// }
.multiselect {
  width: 16em !important;
  // border: 2px solid rgb(127, 170, 170) !important;
  border-radius: 0.5em !important;
}
</style>
