<script setup>
import MdrModal from "@/components/Mudur-Ui-Kit/MdrModal.vue";
import MdrFormField from "@/components/Mudur-Ui-Kit/MdrFormField.vue";
import MdrCheckboxField from "@/components/Mudur-Ui-Kit/MdrCheckboxField.vue";
import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
import DangerButton from "@/components/Buttons/DangerButton.vue";
import { storeToRefs } from "pinia";
import { useResourceStore } from "@/stores/ResourceStore";
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { successAlert, confirmAlert } from "@/components/Mudur-Ui-Kit/alert.js";

const { t } = useI18n();
const { cargoIntegration, cargoIntegrations } = storeToRefs(useResourceStore());
const { update, index, destroy } = useResourceStore();
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
});
const componentValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

const reIndex = async () => {
  cargoIntegrations.value = await index({
    data: {
      resource: "cargo_integrations",
    },
  });
  componentValue.value = false;
};

const del = () => {
  confirmAlert({
    title: t("cancel_title"),
    message: t("resource_delete", [t("cargo_integration")]),
    onConfirm: async () => {
      await destroy({
        data: {
          resource: "cargo_integrations",
          id: cargoIntegration.value.id,
        },
      });
      await reIndex();
      successAlert({ title: t("resource_deleted", [t("cargo_integration")]) });
    },
  });
};

const patch = async () => {
  await update({
    data: {
      resource: "cargo_integrations",
      id: cargoIntegration.value.id,
      data: {
        name: cargoIntegration.value.name,
        is_default: cargoIntegration.value.is_default,
        is_test: cargoIntegration.value.is_test,
        api_settings: cargoIntegration.value.api_settings,
      },
    },
  });
  await reIndex();
  successAlert({ title: t("resource_updated", [t("cargo_integration")]) });
};
</script>
<template>
  <MdrModal
    v-if="cargoIntegration.id"
    v-model="componentValue"
    size="max-w-6xl"
  >
    <template #title>{{ $t("resource_update", [$t("integration")]) }}</template>
    <div class="grid grid-cols-2 gap-3">
      <div class="grid grid-cols-2 gap-4">
        <MdrFormField
          v-model="cargoIntegration.name"
          class="col-span-2"
          label="Hesap Adı"
          required
        >
        </MdrFormField>
        <template
          v-for="(field, key) in cargoIntegration.company_info.settingsFields"
          :key="key"
        >
          <MdrFormField
            v-model="cargoIntegration.api_settings[`${field.model}`]"
            :type="field.type"
            required
            :label="field.label"
          >
          </MdrFormField>
        </template>
      </div>
      <div class="p-3 flex flex-col justify-between">
        <div class="flex flex-col gap-3">
          <img
            :src="cargoIntegration.company_info.logo"
            class="max-w-28 object-contain"
          />
          <!-- eslint-disable -->
          <div v-html="cargoIntegration.company_info.description" />
          <!-- eslint-enable -->
        </div>

        <a
          :href="cargoIntegration.company_info.loginScreen"
          target="_blank"
          class="ml-auto underline text-sm text-primary-600 inline-flex items-center gap-1"
          >{{ cargoIntegration.company_info.title }} giriş ekranı
          <arrow-top-right-on-square-icon class="text-primary-600 w-3 h-3"
        /></a>
      </div>
    </div>
    <template #actions>
      <div class="flex justify-between items-end w-full">
        <div class="flex gap-2">
          <template v-if="cargoIntegration.id">
            <div class="w-full flex justify-start items-center gap-3">
              <MdrCheckboxField
                v-model="cargoIntegration.is_default"
                label="Varsayılan olarak ata"
              />
              <span
                :class="`flex items-center gap-1 text-sm ${
                  cargoIntegration.is_default
                    ? 'text-gray-300 cursor-not-allowed'
                    : 'text-red-600 cursor-pointer'
                }`"
                @click="cargoIntegration.is_default ? false : del()"
              >
                <trash-icon class="w-5" />
                Sil
              </span>
            </div>
          </template>
        </div>
        <div class="flex gap-2">
          <DangerButton @click="componentValue = !componentValue">{{
            $t("cancel")
          }}</DangerButton>
          <PrimaryButton @click="patch()">{{ $t("update") }}</PrimaryButton>
        </div>
      </div>
    </template>
  </MdrModal>
</template>
