<script setup>
import { useSettingsStore } from "@/stores/SettingsStore";
import { storeToRefs } from "pinia";
import RuleSelect from "./RuleSelect.vue";
import CargoSelect from "./CargoSelect.vue";
import WarehouseSelect from "./WarehouseSelect.vue";
import MdrFormField from "@/components/Mudur-Ui-Kit/MdrFormField.vue";
import MdrSelect from "@/components/Mudur-Ui-Kit/MdrSelect.vue";
import MdrToggle from "@/components/Mudur-Ui-Kit/MdrToggle.vue";
import MdrCheckboxField from "@/components/Mudur-Ui-Kit/MdrCheckboxField.vue";
import Draggable from "vuedraggable";
import { Bars3Icon } from "@heroicons/vue/24/outline";
import { shipmentSettingFields } from "@/utils/fields";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const { gateSettings } = storeToRefs(useSettingsStore());

const fieldOptions = shipmentSettingFields(t);
const paymentTypeOptions =
  fieldOptions.find((field) => field.model === "payment_type")?.options || [];
const payorTypeOptions =
  fieldOptions.find((field) => field.model === "payor_type")?.options || [];

const rules = {
  is_in_line_category: {
    group: "line_category",
    component: MdrFormField,
  },
  is_not_in_line_category: {
    group: "line_category",
    component: MdrFormField,
  },
  total_bigger_than: {
    group: "order_total",
    component: MdrFormField,
  },
  total_smaller_than: {
    group: "order_total",
    component: MdrFormField,
  },
  customer_city_in_list: {
    group: "customer_location",
    component: MdrFormField,
  },
  customer_city_not_in_list: {
    group: "customer_location",
    component: MdrFormField,
  },
  is_pay_at_door: {
    group: "pay_at_door",
    component: null,
  },
  is_not_pay_at_door: {
    group: "pay_at_door",
    component: null,
  },
};

const deleteRule = (rule) => {
  const index = gateSettings.value.indexOf(rule);
  gateSettings.value.splice(index, 1);
};
</script>
<template>
  <table class="w-full text-sm text-left text-gray-500">
    <thead class="text-xs text-gray-700 bg-gray-50">
      <tr>
        <th scope="col" class="px-6 py-3 w-1/12">
          {{ $t("activate") }}
        </th>
        <th scope="col" class="px-6 py-3 w-8/12">
          {{ $t("rule_settings") }}
        </th>
        <th scope="col" class="px-6 py-3 w-2/12">
          {{ $t("actions") }}
        </th>
      </tr>
    </thead>
    <Draggable
      v-if="Object.keys(gateSettings).length > 0"
      v-model="gateSettings"
      item-key="id"
      ghost-class="ghost"
      tag="tbody"
    >
      <template #item="{ element }">
        <tr
          :class="`${
            gateSettings.indexOf(element) % 2 !== 0 ? 'bg-white' : 'bg-gray-50'
          } border-b`"
        >
          <th scope="row" class="px-6 py-4 w-1/12">
            <MdrToggle v-model="element.enabled" />
          </th>
          <td class="px-6 py-4 w-8/12">
            <div class="space-y-3">
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <div class="text-xs text-gray-500 mb-1 font-medium">
                    {{ $t("rule") }}
                  </div>
                  <RuleSelect
                    v-model="element.rule"
                    :options="rules"
                    :disabled="!element.enabled"
                  />
                </div>
                <div>
                  <div class="text-xs text-gray-500 mb-1 font-medium">
                    {{ $t("condition") }}
                  </div>
                  <component
                    :is="rules[element.rule]?.component"
                    v-model="element.condition"
                    :disabled="!element.enabled"
                  />
                </div>
              </div>
              <div class="grid grid-cols-4 gap-4">
                <div>
                  <div class="text-xs text-gray-500 mb-1 font-medium">
                    {{ $t("integration") }}
                  </div>
                  <CargoSelect
                    v-model="element.integration"
                    :disabled="!element.enabled"
                  />
                </div>
                <div>
                  <div class="text-xs text-gray-500 mb-1 font-medium">
                    {{ $t("warehouse") }}
                  </div>
                  <WarehouseSelect
                    v-model="element.warehouse"
                    :disabled="!element.enabled"
                  />
                </div>
                <div>
                  <div class="text-xs text-gray-500 mb-1 font-medium">
                    {{ $t("payment_type") }}
                  </div>
                  <MdrSelect
                    v-model="element.payment_type"
                    :options="paymentTypeOptions"
                    value-key="value"
                    text-key="text"
                    :disabled="!element.enabled"
                  />
                </div>
                <div>
                  <div class="text-xs text-gray-500 mb-1 font-medium">
                    {{ $t("payor_type") }}
                  </div>
                  <MdrSelect
                    v-model="element.payor_type"
                    :options="payorTypeOptions"
                    value-key="value"
                    text-key="text"
                    :disabled="!element.enabled"
                  />
                </div>
              </div>
              <div>
                <MdrCheckboxField
                  v-model="element.pay_at_door"
                  :label="$t('is_pay_at_door')"
                  :disabled="!element.enabled"
                />
              </div>
            </div>
          </td>
          <td class="px-6 py-4 w-2/12">
            <div class="flex items-center gap-3 justify-center">
              <button
                class="px-3 py-2 rounded-md bg-white border border-red-400 text-red-500 hover:bg-red-50 hover:border-red-400 hover:text-red-600 text-sm font-medium transition-all duration-200 ease-in-out"
                @click="deleteRule(element)"
              >
                &#x2715;
              </button>
              <Bars3Icon class="w-5 h-5 cursor-move text-gray-600" />
            </div>
          </td>
        </tr>
      </template>
    </Draggable>
    <tbody v-else>
      <tr class="bg-white border-b">
        <th class="px-4 py-2 font-medium text-gray-900 whitespace-nowrap">
          {{ $t("no_rules") }}
        </th>
      </tr>
    </tbody>
  </table>
</template>
