<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import SignaturePad from 'signature_pad';

defineExpose({ clearCanvas });

let canvasRef: HTMLCanvasElement | null = null;
const signaturePad = ref();
const currentColor = ref('blue');
const tab = ref('draw');

const initializeSignaturePad = () => {
  if (canvasRef) {
    signaturePad.value = new SignaturePad(canvasRef, {
      backgroundColor: 'rgb(248,249,250)',
      penColor: 'blue',
    });
  } else {
    console.warn('Canvas reference not found. SignaturePad not initialized.');
  }
};

function changeColor(color: string) {
  signaturePad.value.penColor = color;
  currentColor.value = color;
}

function clearCanvas() {
  signaturePad.value.clear();
}

onMounted(() => {
  canvasRef = document.querySelector('canvas');
  initializeSignaturePad();
});
</script>
<template>
  <div class="surface-1 bordered rounded">
    <q-tabs
      v-model="tab"
      dense
      align="left"
      class="text-grey"
      active-color="primary"
      indicator-color="primary"
    >
      <q-tab
        name="draw"
        label="Draw"
        style="border-top-left-radius: var(--radius-2)"
      />
      <q-tab name="upload" label="Upload" />
    </q-tabs>
    <q-separator />

    <q-tab-panels v-model="tab" animated>
      <q-tab-panel name="draw">
        <div class="column relative-position">
          <div
            class="absolute-top-right q-ma-md q-gutter-x-md row items-center"
          >
            <span
              class="dot"
              :class="{ active: currentColor === 'black' }"
              style="background-color: black"
              @click="changeColor('black')"
            >
              <q-icon
                v-if="currentColor === 'black'"
                name="mdi-check"
                color="white"
                size="sm"
              />
            </span>
            <span
              :class="{ active: currentColor === 'red' }"
              class="dot"
              style="background-color: red"
              @click="changeColor('red')"
            >
              <q-icon
                v-if="currentColor === 'red'"
                name="mdi-check"
                color="white"
                size="sm"
              />
            </span>
            <span
              :class="{ active: currentColor === 'blue' }"
              class="dot"
              style="background-color: blue"
              @click="changeColor('blue')"
            >
              <q-icon
                v-if="currentColor === 'blue'"
                name="mdi-check"
                color="white"
                size="sm"
              />
            </span>
          </div>

          <canvas
            class="signature-canvas"
            ref="canvasRef"
            id="signature-pad"
            width="650"
            height="300"
          ></canvas>
        </div>
      </q-tab-panel>
    </q-tab-panels>

    <!-- <div class="text-right q-gutter-x-md">
      <q-btn id="clear" label="Clear" @click="signaturePad.clear()" />
    </div> -->
  </div>
</template>
<style scoped lang="scss">
.signature-canvas {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
}

.dot {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  &.active {
    height: 35px;
    width: 35px;
  }
}

.color-palette {
  position: absolute;
  display: inline-block;
}
</style>
