<template>
  <div class="mb-8 ml-3">
    <div class="mb-2 ml-8">
      <span v-if="variant == 'customer'" class="text-caption">{{
        $ay.t("CustomerSignature")
      }}</span>
      <span v-else class="text-caption">{{ $ay.t("TechSignature") }}</span>
    </div>

    <template>
      <div class="mb-6 mb-sm-0" @click="showSign()">
        <v-row dense>
          <v-btn v-if="!readonly" icon class="ml-n1 mr-2">
            <v-icon>$ayiEdit</v-icon>
          </v-btn>
          <img
            v-if="hasSignature"
            data-cy="sigImage"
            width="180px"
            height="50px"
            :src="imgUrl"
          />
        </v-row>
      </div>
    </template>

    <v-row dense justify="center">
      <v-dialog
        v-model="openDialog"
        overlay-opacity="1"
        overlay-color="primary"
        max-width="600px"
      >
        <v-card>
          <v-card-title>
            <span v-if="variant == 'customer'" class="text-h4">{{
              $ay.t("CustomerSignature")
            }}</span>
            <span v-else class="subtitle-4">{{ $ay.t("TechSignature") }}</span>
          </v-card-title>
          <v-card-text>
            <div class="mb-5">
              <span class="text-h5"
                >{{ $ay.t("WorkOrder") }}&nbsp;{{ value.serial }}</span
              >
            </div>

            <template v-if="variant == 'customer'">
              <div v-if="$store.state.globalSettings.signatureTitle">
                <span class="text-h6">{{
                  $store.state.globalSettings.signatureTitle
                }}</span>
              </div>
              <div
                v-if="$store.state.globalSettings.signatureHeader"
                class="mb-5"
              >
                <span class="subtitle-1">{{
                  $store.state.globalSettings.signatureHeader
                }}</span>
              </div>
            </template>
            <template v-if="hasSignature">
              <img
                v-if="$vuetify.breakpoint.xs"
                data-cy="sigImage"
                width="275px"
                height="75px"
                :src="imgUrl"
              />
              <img
                v-else
                data-cy="sigImage"
                width="550px"
                height="150px"
                :src="imgUrl"
              />
            </template>
            <template v-else>
              <v-sheet
                v-if="$vuetify.breakpoint.xs"
                data-cy="sigSheet"
                width="275px"
                height="75px"
              >
                <vueSignature
                  ref="sigCtrl"
                  data-cy="sigCtrl"
                  :sig-option="sigOption"
                  :disabled="disabled || imgUrl != null"
                  :w="'275px'"
                  :h="'75px'"
                ></vueSignature>
              </v-sheet>
              <v-sheet v-else data-cy="sigSheet" width="550px" height="150px">
                <vueSignature
                  ref="sigCtrl"
                  data-cy="sigCtrl"
                  :sig-option="sigOption"
                  :disabled="disabled || imgUrl != null"
                  :w="'550px'"
                  :h="'150px'"
                ></vueSignature>
              </v-sheet>
            </template>
            {{ sigDateLocalized }}
            <template v-if="variant == 'customer'">
              <div
                v-if="$store.state.globalSettings.signatureFooter"
                class="my-5"
              >
                <span class="subtitle-2">{{
                  $store.state.globalSettings.signatureFooter
                }}</span>
              </div>
            </template>
            <template>
              <div class="mt-8">
                <v-text-field
                  ref="sigName"
                  v-model="tempName"
                  dense
                  :readonly="disabled || imgUrl != null"
                  :label="$ay.t('Name')"
                  data-cy="sigName"
                ></v-text-field>
              </div>
            </template>
          </v-card-text>
          <v-card-actions>
            <v-btn
              v-if="imgUrl != null"
              color="red darken-1"
              text
              @click="erase()"
              >{{ $ay.t("Delete") }}</v-btn
            >
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" text @click="cancelDialog()">{{
              $ay.t("Cancel")
            }}</v-btn>
            <v-btn
              v-if="imgUrl == null"
              color="blue darken-1"
              text
              data-cy="sigOK"
              @click="save()"
              >{{ $ay.t("OK") }}</v-btn
            >
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
</template>
<script>
import vueSignature from "vue-signature";
export default {
  components: {
    vueSignature
  },
  props: {
    value: {
      default: null,
      type: Object
    },
    pvm: {
      default: null,
      type: Object
    },
    variant: {
      type: String,
      default: null
    },
    formKey: { type: String, default: "" }, //used to grab template from store
    readonly: Boolean,
    disabled: Boolean
  },
  data() {
    return {
      selectedStatus: null,
      openDialog: false,
      sigOption: {
        penColor: "rgb(0, 0, 0)",
        backgroundColor: "rgb(245,245,245)"
      },
      tempSig: null,
      tempDate: null,
      tempName: null
    };
  },
  computed: {
    hasSignature: function() {
      return this.imgUrl != null;
    },
    imgUrl: function() {
      let sig = null;
      if (this.variant == "customer") {
        sig = this.value.customerSignature;
      } else {
        sig = this.value.techSignature;
      }
      if (sig != null && sig.length > 0 && sig.includes("svg")) {
        return sig;
      } else {
        return null;
      }
    },
    sigDate: function() {
      if (this.variant == "customer") {
        return this.value.customerSignatureCaptured;
      } else {
        return this.value.techSignatureCaptured;
      }
    },
    sigName: function() {
      if (this.variant == "customer") {
        return this.value.customerSignatureName;
      } else {
        return this.value.techSignatureName;
      }
    },
    sigDateLocalized: function() {
      const sd = this.sigDate;
      if (sd == null) {
        return null;
      } else {
        return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
          sd,
          this.pvm.timeZoneName,
          this.pvm.languageName,
          this.pvm.hour12
        );
      }
    }
  },
  methods: {
    showSign() {
      if (this.readonly) return;
      this.tempSig = this.imgUrl;
      this.tempDate = this.sigDate;
      this.tempName = this.sigName;
      this.openDialog = true;
    },
    form() {
      return window.$gz.form;
    },
    save() {
      if (!this.$refs.sigCtrl.isEmpty()) {
        let svg = this.$refs.sigCtrl.save("image/svg+xml");
        this.setSig(svg);
        this.setCaptured(window.$gz.locale.nowUTC8601String());
        this.setName(this.tempName);
        this.value.isDirty = true;
        this.pvm.formState.dirty = true;
        this.$emit("change");
      }
      this.openDialog = false;
    },
    setSig(theSig) {
      if (this.variant == "customer") {
        this.value.customerSignature = theSig;
      } else {
        this.value.techSignature = theSig;
      }
    },
    setCaptured(theDate) {
      if (this.variant == "customer") {
        this.value.customerSignatureCaptured = theDate;
      } else {
        this.value.techSignatureCaptured = theDate;
      }
    },
    setName(theName) {
      if (this.variant == "customer") {
        this.value.customerSignatureName = theName;
      } else {
        this.value.techSignatureName = theName;
      }
    },
    cancelDialog() {
      // this.$refs.sigCtrl.fromDataURL(this.tempSig);
      // this.setSig(this.tempSig);
      // this.setCaptured(this.tempDate);
      //  this.setName(this.tempName);

      this.tempName = null;
      this.tempSig = null;
      this.tempDate = null;
      this.openDialog = false;
    },
    erase() {
      this.setSig(null);
      this.setCaptured(null);
      this.setName(null);
      //this.$refs.sigCtrl.clear();
      this.value.isDirty = true;
      this.pvm.formState.dirty = true;
      this.$emit("change");
    },
    fieldValueChanged(ref) {
      if (!this.pvm.formState.loading && !this.pvm.formState.readonly) {
        window.$gz.form.fieldValueChanged(this.pvm, ref);
      }
    }
  }
};
</script>
