<template>
  <div class="w-100 container">
    <div :class="containerClass">
      <div v-for="({title, signature}, index) in value" :key="title + index" class="px-2 mb-2" :class="signatureClass">
        <div class="signatureContainer border">
          <span class="title">{{title}}</span>
          <img :src="signature" class="w-100"/>
          <span data-html2canvas-ignore="true" class="mdi mdi-close delete-action d-print-none hidden-print" @click="deleteSignature(index)"></span>
        </div>
      </div>
    </div>
    <div v-if="addingSignature">
      <div class="mb-2">
        <div class="mb-1">Semnatura</div>
        <vue-signature-pad :width="width" :height="height" ref="signaturePad" :customStyle="{ border: '#dee2e6 1px solid' }"/>
      </div>
      <div class="d-flex">
        <button class="btn btn-secondary" @click="addingSignature = false"><span class="mdi mdi-arrow-left"></span></button>
        <button class="btn btn-secondary ml-2 ms-2" @click="$refs.signaturePad.clearSignature()"><span class="mdi mdi-refresh"></span></button>
        <button class="btn btn-primary ml-2 ms-2" @click="saveSignature">Salvare</button>
      </div>
    </div>
    <div v-else-if="addingName">
      <input-text caption="Nume" v-model="name" class="signatureName"/>
      <div class="d-flex">
        <button class="btn btn-secondary" @click="addingName = false"><span class="mdi mdi-arrow-left"></span></button>
        <button class="btn btn-primary ml-2 ms-2" @click="addingSignature = true">Inainte</button>
      </div>
    </div>
    <button v-else data-html2canvas-ignore="true" class="btn btn-primary d-print-none hidden-print" @click="name = '';addingName = true">
      <span class="mdi mdi-pen"></span>
       {{ caption }}
    </button>
  </div>
</template>
<script>
import Vue from 'vue';
import VueSignaturePad from 'vue-signature-pad';
import { inputText } from '../..';

Vue.use(VueSignaturePad);
export default {
  components: {
    inputText
  },
  name: 'signature',
  props: {
    value: Array,
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    containerClass: {
      type: String,
      default: ''
    },
    signatureClass: {
      type: String,
      default: ''
    },
    caption: {
      type: String,
      default: 'Adauga semnatura'
    },
  },
  data() {
    return {
      addingName: false,
      addingSignature: false,
      name: ''
    }
  },
  methods: {
    saveSignature() {
      const { data } = this.$refs.signaturePad.saveSignature();
      this.$emit('input', [...this.value, { title: this.name, signature: data }]);
      this.name = '';
      this.addingName = false;
      this.addingSignature = false;
    },
    deleteSignature(index) {
      this.$emit('input', this.value.toSpliced(index, 1))
    }
  }
}
</script>
<style lang="scss" scoped>
.signatureContainer {
  border-radius: .25rem;
  position: relative;
  .title {
    position: absolute;
    top: 5px;
    left: 5px;
  }
  .delete-action {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
  }
}
</style>
