<script setup lang="ts">
import ImageHover from '../ImageHover.vue';

const qr = defineModel<string | null>('qr');

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly: boolean;
  separator?: boolean;
}>();

defineEmits<{
  (e: 'upload'): void;
  (e: 'viewQr'): void;
  (e: 'editQr'): void;
}>();
</script>
<template>
  <div class="row col-12">
    <div class="col-12 q-pb-sm text-weight-bold text-body1">
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-xs"
        color="info"
        name="mdi-qrcode"
        style="background-color: var(--surface-3)"
      />
      {{ title }}
    </div>

    <div
      :class="{
        'dark-form-show-qr-code': $q.dark.isActive,
      }"
      class="col-12 row branch-form-show-qr-code"
    >
      <div class="col-12 column flex-center text-center q-py-md">
        <ImageHover
          :img="qr"
          @view="() => $emit('viewQr')"
          @edit="() => $emit('editQr')"
          icon="mdi-qrcode"
          color="gray"
          bg-color="white"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.branch-form-show-qr-code {
  --_bg-branch-form-show-qr-code: linear-gradient(
    180deg,
    var(--indigo-0),
    var(--sand-0)
  );
  --_border-branch-form-show-qr-code: 2px dashed var(--gray-4);
  border: var(--_border-branch-form-show-qr-code);
  border-radius: 10px;
  background-image: var(--_bg-branch-form-show-qr-code);
  &.dark-form-show-qr-code {
    background: var(--gray-9);
    border-radius: 10px;
    border: none;
  }
}
.branch-form-btn-qr-code {
  --_color-btn-qr-code: 3px solid var(--gray-4);
  border: var(--_color-btn-qr-code);
  border-radius: 6px;
  &.dark-form-btn-qr-code {
    border: none;
  }
}
.branch-form-input-Contact {
  --_bg-branch-form-input-Contact: var(--gray-1-hsl);
  background: hsl(var(--_bg-branch-form-input-Contact));
  &.dark-form-input-Contact {
    --_bg-branch-form-input-Contact: var(--gray-10-hsl);
    border: 2px solid var(--gray-9);
  }
}
</style>
