<script setup>
import { ref } from "vue"
import {Steppy} from "vue3-steppy";
import ApiServiece from "@/services/ApiService";
import {toast} from "vue3-toastify";
import {BRow} from "bootstrap-vue-next";
import { useRoute } from "vue-router";

// eslint-disable-next-line no-undef
const emit = defineEmits(['attribute-updated']);

const route = useRoute();

const attributes = ref([])

const step = ref(1)

const attrId = ref(null)

const errors = ref({})

const colorCode = ref();

const attrName = ref(null);

const loading = ref(false);

const loadingAttr = ref(false);

const locale = ref('fa');

const attrModel = ref(null)

const getAttributes = async () => {
  try {
    const { data: { success, data } } = await ApiServiece.get(`admin/attributes`)

    if (success) {
      attributes.value = data;
    }
  } catch (e) {
    toast.error(e?.response?.data?.message)
  }
}

const clearError = (field) => {
  errors.value[field] = "";
}

const handlerSubmitAttr = async () => {
  try {
    loading.value = true;

    const { data: { success, message, data } } = await ApiServiece.post(`admin/attribute-values`,{
      code: colorCode.value,
      attribute_id: route?.params?.id,
    })

    if (success) {
      toast.success(message)

      attrId.value = data?.id

      step.value++
    }
  } catch (e) {
    toast.error(e?.response?.data?.message)
  } finally {
    loading.value = false;
  }
}

const addAttribute = async () => {
  try {
    loadingAttr.value = true;

    const params = {
      title: attrName.value,
      locale: locale.value,
    }

    const { data: { success, message, data } } = await ApiServiece.post(
        `admin/attribute-values/${attrId.value}/translations`,
        params
    )

    if (success) {
      toast.success(message)
      //document.getElementById("close").click();
      emit("attribute-updated");

      attrModel.value = data

      attrName.value = undefined
    }
  } catch (e) {
    toast.error(e?.response?.data?.message)
  } finally {
    loadingAttr.value = false;
  }
}

getAttributes()
</script>

<template>
  <div
      class="modal fade"
      id="addAttributeValue"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
  >
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">
            اضافه کردن مقدار ویژگی جدید
          </h5>
          <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
              @click="step = 1"
          ></button>
        </div>

        <div class="modal-body">
          <Steppy
              v-model:step="step"
              :tabs="[
                 { title: 'انتخاب ویژگی و رنگ', isValid: true },
                 { title: 'ترجمه ها', isValid: true },
              ]"
              backText="قبلی"
              nextText="بعدی"
              doneText="ذخیره"
              primaryColor1="#04A9F5"
              circleSize="45"
          >
            <template #1>
              <BRow>
<!--                <BCol lg="6">-->
<!--                  <div class="form-group">-->
<!--                    <label class="form-label">ویژگی ها</label>-->
<!--                    <select-->
<!--                        v-model="attrId"-->
<!--                        class="form-control"-->
<!--                        placeholder="دسته بندی انتخاب کنید"-->
<!--                    >-->
<!--                      <option-->
<!--                          v-for="attribute in attributes"-->
<!--                          :key="attribute?.id"-->
<!--                          :value="attribute?.id"-->
<!--                      >-->
<!--                        {{ attribute?.translation?.title ?? 'بدون نام' }}-->
<!--                      </option>-->
<!--                    </select>-->
<!--                  </div>-->
<!--                </BCol>-->

                <BCol>
                  <div class="form-group">
                    <label class="form-label">انتخاب رنگ</label>
                    <div class="color-picker-wrapper">
                      <input
                          v-model="colorCode"
                          @input="clearError('colorCode')"
                          type="color"
                          class="form-control color-picker"
                          :class="{ 'is-invalid': errors.colorCode }"
                      />
                      <span
                          v-if="colorCode"
                          class="color-display"
                          :style="{ backgroundColor: colorCode }"
                      ></span>
                    </div>
                    <span> {{ colorCode }}</span>

                    <small v-if="errors.colorCode" class="text-danger">
                      {{ errors.colorCode }}
                    </small>
                  </div>
                </BCol>
              </BRow>

              <!-- Submit Buttons -->
              <div
                  class="d-flex justify-content-end gap-2"
                  style="margin-top: 20px"
              >
                <button
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                    id="close"
                    @click="step = 1"
                >
                  بستن
                </button>

                <button @click="handlerSubmitAttr" class="btn btn-primary" :disabled="loading">
                  <span
                      v-if="loading"
                      class="spinner-border spinner-border-sm"
                      role="status"
                      aria-hidden="true"
                  />
                  ذخیره
                </button>
              </div>
            </template>

            <template #2>
              <form @submit.prevent="addAttribute">
                <BRow class="g-3">
                  <!-- Brand Title -->
                  <BCol lg="6">
                    <div class="form-group">
                      <label class="form-label">مقدار ویژگی</label>

                      <input
                          v-model="attrName"
                          @input="clearError('attrName')"
                          type="text"
                          class="form-control"
                          placeholder="عنوان ویژگی"
                          :class="{ 'is-invalid': errors.attrName }"
                      />
                      <small v-if="errors.attrName" class="text-danger">
                        {{ errors.attrName }}
                      </small>
                    </div>
                  </BCol>

                  <BCol lg="6">
                    <div class="form-group">
                      <label class="form-label">انتخاب زبان</label>
                      <select
                          v-model="locale"
                          class="form-control"
                          placeholder="انتخاب کنید"
                      >
                        <option
                            key="fa"
                            value="fa"
                        >
                          فارسی
                        </option>
                        <option
                            key="en"
                            value="en"
                        >
                          انگلیسی
                        </option>
                        <option
                            key="ar"
                            value="ar"
                        >
                          عربی
                        </option>
                      </select>
                    </div>
                  </BCol>
                </BRow>

                <div
                    class="d-flex justify-content-end gap-2"
                    style="margin-top: 20px"
                >
                  <button
                      type="button"
                      class="btn btn-secondary"
                      data-bs-dismiss="modal"
                      @click="step = 1"
                  >
                    بستن
                  </button>

                  <button type="submit" class="btn btn-primary" :disabled="loadingAttr">
                    <span
                        v-if="loadingAttr"
                        class="spinner-border spinner-border-sm"
                        role="status"
                        aria-hidden="true"
                    />
                    ذخیره
                  </button>
                </div>
              </form>
            </template>
          </Steppy>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.modal-dialog {
  max-width: 50%;
}

.modal-content {
  padding: 20px;
}

.modal-body {
  padding: 20px;
  padding: 1rem 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.input-group {
  margin-top: 0.5rem;
}

.modal-dialog {
  max-width: 50%;
}

.modal-content {
  padding: 1.5rem;
}

.modal-header {
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 1rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.color-picker-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.color-picker {
  width: 300px;
  height: 45px;
  padding: 0;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.color-display {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: inline-block;
}
</style>