<script setup lang="ts">
import DialogForm from 'components/DialogForm.vue';
import { onMounted } from 'vue';
import { ref } from 'vue';

const props = defineProps<{
  action: (...args: unknown[]) => void;
  checkData: (...args: unknown[]) => {
    oldData: { filName: string; value: string }[];
    newData: { filName: string; value: string }[];
  };
  cancel?: (...args: unknown[]) => void;
}>();
const modal = ref<boolean>(false);
const selectOldData = ref<boolean>(true);
const selectNewData = ref<boolean>(false);

onMounted(() => {
  if (props.checkData().oldData.length === 0) {
    props.action();
  } else {
    modal.value = true;
  }
});
</script>
<template>
  <DialogForm
    v-model:modal="modal"
    :title="$t('form.warning.duplicateInformation')"
    :submit="
      () => {
        if (selectNewData) {
          action();
        }
        modal = false;
      }
    "
    :close="
      () => {
        modal = false;
      }
    "
    width="60%"
    height="45%"
  >
    <template #iconTitle>
      <q-icon name="mdi-alert" color="warning" size="xs" class="q-mr-xs" />
    </template>
    <div class="q-py-md q-px-lg full-height">
      <div class="surface-1 q-pa-sm column bordered rounded full-height">
        <div
          class="row col-3 items-center text-weight-medium"
          style="font-size: 16px"
        >
          เลือกข้อมูลที่มีอยู่แล้ว
        </div>
        <div
          class="row col-3 items-center cursor-pointer"
          style="gap: 16px"
          :class="{ active: selectOldData }"
          @click="
            () => {
              selectOldData = true;
              selectNewData = false;
            }
          "
        >
          <q-checkbox
            :model-value="selectOldData"
            @update:model-value="
              (v) => {
                if (selectOldData === false) {
                  selectOldData = v;
                  selectNewData = !v;
                }
              }
            "
            size="xs"
          />

          <div v-for="v in checkData().oldData">
            <span class="text-regular app-text-muted">
              {{ v.filName }}
            </span>
            : {{ v.value }}
          </div>
        </div>
        <div
          class="row col-3 items-center text-weight-medium"
          style="font-size: 16px"
        >
          เพิ่มมาใหม่
        </div>
        <div
          class="row col-3 items-center cursor-pointer"
          style="gap: 16px"
          :class="{ active: selectNewData }"
          @click="
            () => {
              selectNewData = true;
              selectOldData = false;
            }
          "
        >
          <q-checkbox
            :model-value="selectNewData"
            @update:model-value="
              (v) => {
                if (selectNewData === false) {
                  selectNewData = v;
                  selectOldData = !v;
                }
              }
            "
            size="xs"
          />

          <div v-for="v in checkData().newData">
            <span class="text-regular app-text-muted">
              {{ v.filName }}
            </span>
            : {{ v.value }}
          </div>
        </div>
      </div>
    </div>
  </DialogForm>
</template>

<style lang="scss">
.active {
  border: 3px solid var(--blue-4);
  background-color: var(--blue-0);
  border-radius: var(--radius-2);
}
</style>
