<template>
  <section class="flex flex-col gap-4">
    <Panel :header="$t('اطلاعات صفحه ی اصلی وبسایت')">
      <div class="grid grid-cols-1 gap-7">
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="data.header" />
            <label>{{ $t("متن هدر") }}</label>
          </FloatLabel>
        </div>
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <Textarea v-model="data.titleText" rows="5" class="w-full" />
            <label>{{ $t("توضیحات هدر") }}</label>
          </FloatLabel>
        </div>
      </div>
      <div class="grid grid-cols-3 gap-7 mt-7">
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText v-model="data.student" class="w-full" />
            <label>{{ $t("تعداد دانشجو ها") }}</label>
          </FloatLabel>
        </div>
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="data.expertise" />
            <label>{{ $t("تعداد ویدیو های آموزشی") }}</label>
          </FloatLabel>
        </div>
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="data.rate" />
            <label>{{ $t("امتیاز دانشجو ها") }}</label>
          </FloatLabel>
        </div>
      </div>
      <p class="mt-7 text-lg">درباره ما :</p>
      <div class="mt-2">
        <FloatLabel>
          <Editor v-model="data.about" editorStyle="height: 320px">
            <template v-slot:toolbar>
              <span class="ql-formats text-start justify-center w-full flex">
                <button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
                <button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
                <button
                  v-tooltip.bottom="'Underline'"
                  class="ql-underline"
                ></button>
              </span>
            </template>
          </Editor>
        </FloatLabel>
      </div>
      <div class="flex pt-4 justify-end">
        <Button
          :label="$t('edit')"
          icon="pi pi-save"
          severity="success"
          :loading="saving"
          @click="save(data)"
        />
      </div>
    </Panel>
  </section>
</template>

<script setup>
import {
  inject,
  watchEffect,
  ref,
  reactive,
} from "vue";
import { useStaticsStore } from "@/stores/statics";

const data = reactive({
  header: "",
  titleText: "",
  student: null,
  title: null,
  rate: null,
  expertise: null,
  about: "",
});
const saving = ref(false);
async function save(data) {
  saving.value = true;
  const result = await store.edit(data);

  if (result.data === true) {
    toast.add({
      life: 2000,
      severity: "success",
      summary: t("successful"),
      detail: t("اطلاعات با موفقیت ویرایش شد"),
    });
  } else {
    toast.add({
      severity: "error",
      life: 2000,
      detail: t("خطا، مجدد تلاش کنید"),
      summary: t("خطا، مجدد تلاش کنید"),
    });
  }

  saving.value = false;
}


const { toast, t } = inject("service");

const store = useStaticsStore();

watchEffect(async () => {
  await store.index();
  data.header = store.items.header;
  data.student = store.items.student;
  data.title = store.items.title;
  data.expertise = store.items.expertise;
  data.about = store.items.about;
  data.titleText = store.items.titleText;
  data.rate = store.items.rate;
});
</script>
