<template>
  <v-dialog v-model="dialogModel" max-width="700" persistent>
    <v-card>
      <v-toolbar>
        <v-toolbar-title>Signature</v-toolbar-title>
        <v-spacer />
        <v-btn icon="mdi-close" @click="hideModal" />
      </v-toolbar>

      <v-card-text>
        <v-row no-gutters>
          <v-col cols="12">
            <div class="text-subtitle-1 text-medium-emphasis ml-2">
              Your signature here
            </div>

            <NuxtSignaturePad
              ref="signature"
              :options="state.option"
              width="100%"
              height="400px"
              :disabled="state.disabled"
              class="border"
            />
          </v-col>

          <v-col cols="12" class="text-center">
            <v-row class="d-flex">
              <v-col class="w-50 px-3">
                <v-btn
                  text="clear"
                  color="warning"
                  class="my-4 w-100 rounded-lg"
                  height="40px"
                  @click="clear"
                />
              </v-col>

              <v-col class="w-50 px-3">
                <v-btn
                  text="submit"
                  color="#1867C0"
                  class="my-4 w-100 rounded-lg"
                  height="40px"
                  :loading="loading"
                  :disabled="loading"
                  @click="submit"
                />
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
const loading = ref(false);

const message = ref("");
const messageColor = ref("");
const messageSnackbar = ref(false);

function showMessage(msg: string, color: string) {
  message.value = msg;
  messageColor.value = color;
  messageSnackbar.value = true;
}

const signature = ref<any>(null);

const state = ref({
  count: 0,
  option: {
    penColor: "rgb(0, 0, 0)",
    backgroundColor: "rgb(255,255,255)",
  },
  disabled: false,
});

const emit = defineEmits<{
  (event: "onSubmit", payload: string): void;
  (event: "onCloseDialog"): void;
}>();

const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false,
  },
});

const dialogModel = computed({
  get: () => props.isShowDialog,
  set: (value: boolean) => {
    if (!value) emit("onCloseDialog");
  },
});

const hideModal = () => {
  emit("onCloseDialog");
};

const file = ref<File | null>(null);
const { addFile } = useFile();

const submit = async () => {
  try {
    if (!signature.value) {
      showMessage("Signature pad is not ready.", "error");
      return;
    }

    loading.value = true;

    const base64 = signature.value.saveSignature?.();
    if (!base64) {
      showMessage("Please provide a signature first.", "warning");
      return;
    }

    const blob = await (await fetch(base64)).blob();
    file.value = new File([blob], "signature.jpg", { type: "image/jpeg" });

    const response = await addFile(file.value);

    if (response && response.id) {
      emit("onSubmit", response.id);
    }
  } catch (error) {
    showMessage("Error uploading signature. Please try again.", "error");
  } finally {
    loading.value = false;
  }
};

const clear = () => {
  signature.value?.clearCanvas?.();
};
</script>
