<template>
  <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>
            <VueEditor
              dir="rtl"
              v-model="editorData"
              :editorOptions="editorOptions"
            ></VueEditor>
          </div>
        </div>
      </form>
      <button class="btn-save" @click="saveData">ذخیره</button>
    </div>
  </div>
</template>
<script>
import searchApi from "~/apis/searchApi";
import settingsApi from "~/apis/settingsApi";

import { VueEditor } from "vue2-editor";
import { mapState, mapActions } from "pinia";
import { useStorage } from "@vueuse/core";

export default {

  beforeMount() {
    this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
  },
  computed: {
    ...mapState(useSearchStore, ["helpSchemaGetter"]),
    ...mapState(["organNameGetter"]),
  },
  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 {
      value: "",
      editorData: "",
      title: "",
      link: "",
      description: "",
      fullDesc: "",
      httpService: undefined,
      options: [{ name: "جستجو" }, { name: "محتوا" }, { name: "مطالعه" }],
      editorOptions: {
        formats: {
          direction: "rtl",
          align: "right",
        },
        placeholder: "توضیحات...",
        // readOnly: true,
        // theme: "snow",
      },
    };
  },
  methods: {
    ...mapActions("search", ["helpSchemaSetter"]),
    select(e) {
      this.value = e;
    },
    getSchemas() {
      this.httpService
        .postRequest(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 + "شروع شود";
        this.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(settingsApi.help.addItem, payload)
        .then((response) => {
          this.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>