<template>
  <NuxtLayout name="default" :menu="adminMenu">
    <div class="page">
      <div class="container">
        <form>
          <div class="form-row">
            <div class="col-3">
              <label for=""> انتخاب بخش:</label>
              <multiselect
                :allow-empty="false"
                :searchable="true"
                :close-on-select="true"
                :show-labels="false"
                :value="value"
                :options="options"
                class="multi"
                @select="select"
                label="label"
                track-by="key"
                placeholder="دسته"
                :hide-selected="false"
                :max-height="200"
              >
              </multiselect>
            </div>
          </div>
          <div class="form-row">
            <div class="col-6">
              <label for="">عنوان سوال:</label>
              <input
                type="text"
                class="form-control"
                placeholder="عنوان سوال را کوتاه و واضح وارد نمایید"
                v-model="title"
              />
            </div>
            <div class="col-6">
              <label for="">نشانی صفحه:</label>
              <input
                type="text"
                class="form-control"
                placeholder="نشانی از همین سامانه انتخاب کنید"
                v-model="link"
              />
            </div>
          </div>
          <div class="form-row">
            <div class="col">
              <label for="">توضیح کوتاه:</label>
              <input
                type="text"
                placeholder="توضیح مختصر حداکثر یک خط باشد"
                v-model="description"
                maxlength="500"
              />
            </div>
          </div>
          <div class="form-row">
            <div class="col">
              <label for="" class="mt-2">توضیح مفصل:</label>
              <quill-editor
                v-model="editorData"
                content-type="html"
                :options="editorOptions"
              ></quill-editor>
              <!-- <VueEditor
              dir="rtl"
              v-model="editorData"
              :editorOptions="editorOptions"
            ></VueEditor> -->
            </div>
          </div>
        </form>
        <button class="btn-save" @click="saveData">ذخیره</button>
      </div>
    </div>
  </NuxtLayout>
</template>
<script>
import searchApi from "~/apis/searchApi";
import settingsApi from "~/apis/settingsApi";
import adminMenu from "~/json/admin/json/menu.json";
// import { VueEditor } from "vue2-editor";
import { mapState, mapActions } from "pinia";
import { useStorage } from "@vueuse/core";
import { useCommonStore } from "~/stores/commonStore";

export default {
  name: "adminGuides",
  setup() {
    definePageMeta({
      name: "adminGuides",
      layout: false,
    });
  },
  beforeMount() {
    // this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
    this.httpService = useNuxtApp()["$http"];
  },
  computed: {
    ...mapState(useCommonStore, ["organNameGetter","helpSchemaGetter"]),
  },
  mounted() {
    let localStoageHelpSchema = useStorage("settingSchema", undefined).value;

    if (localStoageHelpSchema) {
      let helpSchema = JSON.parse(localStoageHelpSchema);
      this.helpSchemaSetter(helpSchema);
      this.options = this.helpSchemaGetter[0].category;
    } else this.getSchemas();
  },
  data() {
    return {
      adminMenu: adminMenu,
      value: "",
      editorData: "",
      title: "",
      link: "",
      description: "",
      fullDesc: "",
      httpService: undefined,
      options: [{ name: "جستجو" }, { name: "محتوا" }, { name: "مطالعه" }],
      editorOptions: {
        theme: "snow", // تم ویرایشگر: 'snow' یا 'bubble'
        placeholder: "متن خود را بنویسید...",
        modules: {
          toolbar: [
            [{ header: [1, 2, 3, false] }], // سطح هدینگ‌ها
            ["bold", "italic", "underline", "strike"], // دکمه‌های استایل متن
            [{ color: [] }, { background: [] }], // رنگ متن و پس‌زمینه
            [{ list: "ordered" }, { list: "bullet" }], // لیست‌های شماره‌دار و نقطه‌ای
            ["blockquote", "code-block"], // نقل‌قول و کد
            [{ align: [] }], // تراز بندی متن
            ["link", "image", "video"], // افزودن لینک، تصویر، و ویدیو
            ["clean"], // حذف فرمت‌ها
          ],
        },
      },
    };
  },
  methods: {
    // ...mapActions("search", ["helpSchemaSetter"]),
    ...mapActions(useCommonStore, ["helpSchemaSetter"]),
    // searchStore
    select(e) {
      this.value = e;
    },
    getSchemas() {
      this.httpService
        .postRequest(repoUrl() + searchApi.schema.list, {
          organ: this.organNameGetter,
          system: "setting",
          build_state: buildState(),
        })
        .then((response) => {
          this.helpSchemaSetter(response.data.setting);
          this.options = this.helpSchemaGetter[0].category;
          // this.options = response;
        });
    },
    saveData() {
      var origin = location.origin;

      let cleaned = this.link;
      if (this.link.startsWith(origin) || this.link == "") {
        cleaned = this.link.replace(origin, "");
      } else {
        let errorMessage = "نشانی پیوند باید با " + origin + "شروع شود";
        mySwalToast({
          title: errorMessage,
          // html: response.data.message,

          icon: "error",
          timer: 7000,
        });
        return "";
      }

      let payload = {
        value_key: this.value.key,
        value: this.editorData,
        meta: {
          title: this.title,
          link: cleaned,
          description: this.description,
        },
      };

      this.httpService
        .postRequest(repoUrl() + settingsApi.help.addItem, payload)
        .then((response) => {
          mySwalToast({
            title: "با موفقیت  ثبت شد",
            // html: response.data.message,
            icon: "success",
          });
          this.resetItem();
          // this.helpSchemaSetter(response.data.setting);
          // this.options = response;
        });
    },
    resetItem() {
      this.title = "";
      this.link = "";
      this.description = "";
      this.editorData = "";
    },
  },
};
</script>
<style scoped lang="scss">
input {
  border-radius: 0.5rem;
  border: 2px solid rgb(127, 170, 170);
  font-size: 14px;
  height: 3em;
  width: 100%;
  &::placeholder {
    color: #a7a098;
  }
}

.multi {
  // width: 200px;
  border: 2px solid rgb(127, 170, 170);
  border-radius: 0.5rem;
}
.btn-save {
  width: 100px;
  height: 2.5em;
  float: left;
  background-color: white;
  margin-top: 0.8em;
  border-radius: 0.5rem;
  border: 2px solid rgb(127, 170, 170);
}
.page {
  height: calc(100vh - 5em);
}
</style>