<script lang="ts" setup>
import type { IPaymentOrder } from 'src/shared/lib/types/payments';
import { onMounted, onBeforeUnmount, ref, computed } from 'vue';
import QRCode from 'qrcode';
import { useCooperativeStore } from 'src/entities/Cooperative';
import { copyToClipboard, Notify } from 'quasar';

// Определяем интерфейс для orderData
interface IOrderData {
  sum?: string;
  name?: string;
  bankname?: string;
  bic?: string;
  kpp?: string;
  correspacc?: string;
  personalacc?: string;
  purpose?: string;
  payeeinn?: string;
}

const props = defineProps<{
  paymentOrder: IPaymentOrder;
}>();

const qrElement = ref<HTMLCanvasElement | null>(null);
const coop = useCooperativeStore()

const amount = computed(() => {
  return orderData.value.sum ? `${(parseFloat(orderData.value.sum) / 100).toFixed(2)} ${coop.governSymbol}` : `0 ${coop.governSymbol}`;
});

const orderData = computed(() => {
  const dataString = props.paymentOrder.details.data;
  const parsedDetails: IOrderData = {};  // Используем тип IOrderData

  // Разбираем строку на пары ключ=значение
  const parts = dataString.split('|');

  for (const part of parts) {
    const [key, value] = part.split('=');
    if (key) {
      parsedDetails[key.toLowerCase() as keyof IOrderData] = value; // Ключи в нижнем регистре
    }
  }

  return parsedDetails;
})

onMounted(() => {
  qrElement.value = document.getElementById('qr') as HTMLCanvasElement | null;
  generateQRCode();
});

onBeforeUnmount(() => {
  if (qrElement.value) {
    const ctx = qrElement.value.getContext('2d');
    if (ctx) {
      ctx.clearRect(0, 0, qrElement.value.width, qrElement.value.height);
    }
  }
});

const generateQRCode = () => {
  if (qrElement.value) {
    QRCode.toCanvas(qrElement.value, props.paymentOrder.details.data, {width: 400}, function (error) {
      if (error) console.error(error);
    });
  } else {
    console.error('QR element not found');
  }
};

const copyAll = () => {
  const data = `
ИНН Получателя: ${orderData.value.payeeinn}
Получатель: ${orderData.value.name}
БИК: ${orderData.value.bic}
Банк получателя: ${orderData.value.bankname}
КПП: ${orderData.value.kpp}
Корреспондентский счёт: ${orderData.value.correspacc}
Номер счёта: ${orderData.value.personalacc}
Сумма платежа: ${amount.value}
Назначение платежа: ${orderData.value.purpose}
  `.trim();

  copy(data);
};

const copy = (data: any) => {
  copyToClipboard(data)
    .then(() => Notify.create({ message: 'Реквизиты скопированы в буфер обмена', type: 'positive' }))
    .catch(console.log)
}

const downloadQR = () => {
  if (qrElement.value) {
    const link = document.createElement('a');
    link.href = qrElement.value.toDataURL('image/png');
    link.download = 'qrcode.png';
    link.click();
  } else {
    console.error('QR element not found');
  }
};
</script>

<template lang="pug">
div
  q-input(label="ИНН получателя" v-model="orderData.payeeinn" readonly)
    template(v-slot:append)
      q-btn(icon="fas fa-copy" @click="copy(orderData.payeeinn)" size="xs" flat)

  q-input(label="Получатель" v-model="orderData.name" readonly)
    template(v-slot:append)
      q-btn(icon="fas fa-copy" @click="copy(orderData.name)" size="xs" flat)

  q-input(label="БИК" v-model="orderData.bic" readonly)
    template(v-slot:append)
      q-btn(icon="fas fa-copy" @click="copy(orderData.bic)" size="xs" flat)

  q-input(label="Банк получателя" v-model="orderData.bankname" readonly)
    template(v-slot:append)
      q-btn(icon="fas fa-copy" @click="copy(orderData.bankname)" size="xs" flat)

  q-input(label="КПП" v-model="orderData.kpp" readonly)
    template(v-slot:append)
      q-btn(icon="fas fa-copy" @click="copy(orderData.kpp)" size="xs" flat)

  q-input(label="Корреспондентский счёт" v-model="orderData.correspacc" readonly)
    template(v-slot:append)
      q-btn(icon="fas fa-copy" @click="copy(orderData.correspacc)" size="xs" flat)

  q-input(label="Номер счёта" v-model="orderData.personalacc" readonly)
    template(v-slot:append)
      q-btn(icon="fas fa-copy" @click="copy(orderData.personalacc)" size="xs" flat)

  q-input(label="Cумма платежа" v-model="amount" readonly)
    template(v-slot:append)
      q-btn(icon="fas fa-copy" @click="copy(amount)" size="xs" flat)

  q-input(label="Назначение платежа" v-model="orderData.purpose" readonly)
    template(v-slot:append)
      q-btn(icon="fas fa-copy" @click="copy(orderData.purpose)" size="xs" flat)

  div.full-width.text-center
    canvas#qr
  div.full-width.text-center
    q-btn(@click="copyAll" flat icon="fas fa-copy" size="sm") скопировать реквизиты
    q-btn(@click="downloadQR" flat icon="download" size="sm") скачать QR
</template>

<style>
#qr{
  width: 200px !important;
  height: 200px !important;
}
</style>
