<script setup lang="ts">
const serviceCharge = defineModel<number>('serviceCharge');
const agentPrice = defineModel<number>('agentPrice');
const price = defineModel<number>('price');
const vatIncluded = defineModel<boolean>('vatIncluded');

withDefaults(
  defineProps<{
    dense?: boolean;
    outlined?: boolean;
    readonly?: boolean;
    separator?: boolean;
    isType?: boolean;
    priceDisplay?: {
      price: boolean;
      agentPrice: boolean;
      serviceCharge: boolean;
    };
  }>(),
  {
    priceDisplay: () => ({
      price: true,
      agentPrice: true,
      serviceCharge: true,
    }),
  },
);
</script>

<template>
  <div class="row col-12">
    <div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-sm"
        color="info"
        name="mdi-cash"
        style="background-color: var(--surface-3)"
      />
      {{ $t('productService.product.priceInformation') }}

      <div
        class="surface-3 q-px-sm q-py-xs row text-caption q-ml-md app-text-muted"
        style="border-radius: var(--radius-3)"
      >
        <span
          id="btn-include-vat"
          for="btn-include-vat"
          class="q-px-sm q-mr-lg rounded cursor-pointer"
          :class="{
            dark: $q.dark.isActive,
            'active-addr': vatIncluded,
            'cursor-not-allowed': readonly,
          }"
          @click="readonly ? '' : (vatIncluded = true)"
        >
          {{ $t('productService.product.vatIncluded') }}
        </span>
        <span
          id="btn-no-include-vat"
          for="btn-no-include-vat"
          class="q-px-sm rounded cursor-pointer"
          :class="{
            dark: $q.dark.isActive,
            'active-addr': !vatIncluded,
            'cursor-not-allowed': readonly,
          }"
          @click="readonly ? '' : (vatIncluded = false)"
        >
          {{ $t('productService.product.vatExcluded') }}
        </span>
      </div>
    </div>
    <div class="col-12 row q-col-gutter-sm">
      <q-input
        id="input-price"
        for="input-price"
        v-if="priceDisplay?.price"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-4"
        type="number"
        :label="$t('productService.product.salePrice')"
        v-model="price"
      />

      <q-input
        id="input-agent-price"
        for="input-agent-price"
        v-if="priceDisplay?.agentPrice"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-4"
        type="number"
        :label="$t('productService.product.agentPrice')"
        v-model="agentPrice"
      />

      <q-input
        id="input-service-charge"
        for="input-service-charge"
        v-if="priceDisplay?.serviceCharge"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-4"
        type="number"
        :label="$t('productService.product.processingPrice')"
        v-model="serviceCharge"
      />
    </div>
  </div>
</template>

<style scoped>
.active-addr {
  color: hsl(var(--info-bg));
  background-color: hsla(var(--info-bg) / 0.1);
  border-radius: var(--radius-3);

  &.dark {
    background-color: var(--surface-1);
  }
}
</style>
