<script setup>
import SettingsTab from "@/layouts/SettingsTab.vue";
import MdrCheckboxField from "@/components/Mudur-Ui-Kit/MdrCheckboxField.vue";
import MdrSelect from "@/components/Mudur-Ui-Kit/MdrSelect.vue";
import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
import { ArrowLongRightIcon } from "@heroicons/vue/24/solid";
import { storeToRefs } from "pinia";
import { useSettingsStore } from "@/stores/SettingsStore";
import { useUiStore } from "@/stores/UiStore";

const settingsStore = useSettingsStore();
const { allOrderStatuses } = useUiStore();
const { wcStatusSettings } = storeToRefs(settingsStore);
const statusLabels = {
  non_processed: "Gönderime Hazır",
  shipped: "Yola Çıktı",
  on_transit: "Taşıma Sürecinde",
  at_delivery_center: "Dağıtım Merkezinde",
  in_courier: "Dağıtıma Çıktı",
  delivered: "Teslim Edildi",
};

const handleUpdate = () => {
  settingsStore.updateWcStatusSettings(wcStatusSettings.value);
};
</script>

<template>
  <SettingsTab>
    <template #title>
      <div>{{ $t("order_status_title") }}</div>
    </template>
    <template #description>
      {{ $t("order_status_desc") }}
    </template>
    <div>
      <table class="w-full text-sm text-left text-gray-500">
        <thead class="text-xs text-gray-700 bg-gray-50">
          <tr>
            <th
              v-for="title in [
                'Aktiflik',
                'Kargo Durumu',
                '',
                'Sipariş Durumu',
              ]"
              :key="title"
              scope="col"
              class="px-6 py-3"
            >
              {{ title }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(label, key, index) in statusLabels"
            :key="key"
            :class="`${index % 2 !== 0 ? 'bg-white' : 'bg-gray-50'} border-b`"
          >
            <td scope="row" class="px-6 py-4 w-1/12">
              <MdrCheckboxField
                v-model="wcStatusSettings.find((e) => e.key === key).active"
              />
            </td>
            <td class="px-6 py-4">{{ label }}</td>
            <td><ArrowLongRightIcon class="w-5 h-5" /></td>
            <td class="px-6 py-4">
              <MdrSelect
                v-model="wcStatusSettings.find((e) => e.key === key).status"
                :options="allOrderStatuses"
                value-key="key"
                text-key="text"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <template #actions>
      <PrimaryButton class="max-w-fit mt-5" @click="handleUpdate">
        {{ $t("save") }}
      </PrimaryButton>
    </template>
  </SettingsTab>
</template>
