<template>
  <div class="modal" tabindex="-1" id="meta-item-modal">
    <div
      class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg"
    >
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            {{
              selectedItemGetter.title +
                "(" +
                selectedItemGetter.meet_code +
                ")"
            }}
          </h5>
          <button
            type="button"
            class="close me-auto ms-0"
            data-dismiss="modal"
            aria-label="Close"
            @click.prevent="closeModal()"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col-lg-4 d-flex flex-lg-column">
                <button-component
                 
                  classes="btn-default nav-button prev d-lg-none"
                  @click="prevTab()"
                  buttonText=""
                >
                  <span class="tavasi tavasi-Component-358--1"></span>
                </button-component>
                <div
                  ref="nav-tab"
                  class="nav nav-tabs py-4 flex-lg-wrap"
                  id="nav-tab"
                  role="tablist"
                >
                  <a
                    v-for="(groupItem, index) in selectedProjectGetter?.meta"
                    :key="index"
                    @click="setTab(index)"
                    class=" nav-link d-block w-100 mb-lg-2"
                    :class="{ active: index == 0 }"
                    id="nav-myAccount-tab"
                    data-bs-toggle="tab"
                    href="#nav-myAccount"
                    role="tab"
                    aria-controls="nav-myAccount"
                    aria-selected="true"
                    >{{ groupItem.title }}</a
                  >
                </div>

                <button-component
                  classes="btn-default nav-button next d-lg-none"
                  @click="nextTab()"
                  buttonText=""
                >
                  <span class="tavasi tavasi-Component-359--1"></span
                ></button-component>
              </div>
              <div class="col-lg-8">
                <form
                  id="meta-item-form"
                  ref="meta-item-form"
                  @submit.prevent="save()"
                  class="text__14"
                >
                  <div style="height: calc(100vh - 14em);">
                    <div class="d-flex align-items-center">
                      <div v-for="(metaItem, index) in metaItems">
                        <span :key="'meta' + metaItem.id" class="title text__12">
                          {{ metaItem.title }}
                        </span>
                        <span
                          style="color:blue"
                          v-if="index < metaItems.length - 1"
                          class="tavasi tavasi-Component-22--1"
                        ></span>
                      </div>
                    </div>

                    <keep-alive>
                      <form-builder
                        ref="formBuilder"
                        :formElements="selectedProjectGetter.meta[currentTab]"
                        :formData="selectedItemGetter"
                        @close-modal="closeModal()"
                      ></form-builder>
                    </keep-alive>
                  </div>

                  <!-- <div class="modal-footer">
                    <div class="d-flex justify-content-between">
                      <div class="d-flex">
                        <button-component
                          type="submit"
                          classes="btn-outline-primary"
                          :buttonText="buttonText"
                          :buttonLoading="buttonLoading"
                        ></button-component>

                        <button-component
                          classes="btn-default"
                          @click="closeModal()"
                          buttonText="انصراف"
                          :buttonLoading="buttonLoading"
                        ></button-component>
                      </div> -->
                  <!-- <button-component
                    classes="delete-btn btn-outline-danger"
                    @click="deleteItem()"
                    buttonText="حذف"
                    :buttonLoading="buttonLoading"
                  >
                    <i class="tavasi tavasi-bin"></i>
                  </button-component> -->
                  <!-- </div> -->
                  <!-- </div> -->
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button-component
            classes="btn-default"
            @click="closeModal()"
            buttonText="انصراف"
            :buttonLoading="buttonLoading"
          ></button-component>
          <button-component
            @click="save"
            classes="btn-outline-primary"
            :buttonText="buttonText"
            :buttonLoading="buttonLoading"
          ></button-component>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apis from "~/apis/listApi";
import { mapState } from "pinia";
export default {
  props: ["metaItems"],
  emits: ["update-list", "close-modal", "delete-item"],
  data() {
    return {
      leftPosition: 0,
      rightPosition: 0,

      currentTab: 0,
      fetchingData: false,
      currentComponent: ["ItemForm", "SubjectForm"],
      buttonLoading: false,
    };
  },
  computed: {
    ...mapState("list", [
      "selectedProjectGetter",
      "selectedItemGetter",
      "listIdGetter",
    ]),
    buttonText() {
      return this.selectedItemGetter?.id || this.selectedItemGetter?.guid
        ? "بروزرسانی"
        : "ثبت";
    },
  },
  methods: {
    prevTab() {
      const el = this.$refs["nav-tab"];
      const sLeft = el.scrollLeft;

      if (sLeft * -1 + el.clientWidth <= el.scrollWidth) {
        el.scrollLeft += 130;
      }
    },
    nextTab() {
      const el = this.$refs["nav-tab"];
      const sLeft = el.scrollLeft;

      if (sLeft * -1 + el.clientWidth <= el.scrollWidth) {
        el.scrollLeft -= 130;
      }
    },

    save() {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      let tmp = this.$refs.formBuilder.localFormData;
      let diff = {};
      Object.keys(this.selectedItemGetter).forEach((key) => {
        if (tmp[key]) {
          if (typeof tmp[key] == "object") {
            if (
              JSON.stringify(tmp[key]) !==
              JSON.stringify(this.selectedItemGetter[key])
            )
              diff[key] = tmp[key];
          } else if (tmp[key] != this.selectedItemGetter[key])
            diff[key] = tmp[key];
        }
      });

      const formData = {
        id: this.selectedItemGetter.id,
        id_store: this.selectedItemGetter?.id_store,
        
        projectid: this.selectedProjectGetter?.id,
        item_state: this.selectedProjectGetter?.item_state,

        meta: JSON.stringify(diff),
      };

      // remove my manually added active property, if exists.
      formData.meta = formData.meta.replace(',"active":true', "");
      this.selectedItemGetter.listid = this.listIdGetter;

      const url = this.selectedItemGetter.id
        ? apis.item.edit
        : apis.item.addbylist;

      ApiService.formData(url, formData)
        .then((res) => {
          this.mySwalToast({
            title: "تبریک",
            html: res.data.message,
            icon: "success",
          });

          this.$emit("update-list");
        })
        
        .finally(() => {
          this.buttonLoading = false;
        });
    },

    closeModal() {
      this.$emit("close-modal");
    },
    updateList() {
      this.$emit("update-list");
    },
    deleteItem() {
      this.$emit("delete-item");
    },
    setTab(index) {
      this.currentTab = index;
    },
  },
  
};
</script>
<style lang="scss" scoped>
.nav.nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  position: relative;
  .nav-link {
    white-space: nowrap;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  &::-webkit-scrollbar {
    display: none;
    width: 0 !important;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  & {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .nav-button {
    position: absolute;
    top: 0;
    bottom: 0;

    &.prev {
      right: 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), #fff);
    }
    &.next {
      left: 0;
      background: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), #fff);
    }
  }
}
</style>
