<script setup lang="ts">
import useOptionStore from 'stores/options';
import { Attributes } from 'stores/product-service/types';
import { Icon } from '@iconify/vue';

const optionStore = useOptionStore();

defineProps<{
  readonly?: boolean;
}>();

const serviceAttributes = defineModel<Attributes>('serviceAttributes', {
  required: true,
});

defineEmits<{
  (e: 'serviceProperties'): void;
}>();
</script>
<template>
  <div class="column full-width full-height">
    <div
      class="text-weight-bold text-body1 flex items-center justify-between q-px-md q-py-sm"
      style="background: hsla(var(--info-bg) / 0.1); min-height: 50px"
    >
      {{ $t(`productService.service.serviceProperties`) }}
      <q-btn
        id="btn-capitalize"
        v-if="!readonly"
        :disable="readonly"
        dense
        flat
        unelevated
        class="q-px-sm text-capitalize"
        color="info"
        @click="$emit('serviceProperties')"
      >
        <Icon
          icon="basil:settings-adjust-solid"
          width="24px"
          class="q-mr-sm"
          style="color: hsl(var(--info-bg))"
        />
        <span v-if="$q.screen.gt.xs">
          {{ $t('productService.service.serviceProperties') }}
        </span>
      </q-btn>
    </div>

    <div class="col scroll q-px-md q-py-sm flex items-center">
      <div
        v-if="serviceAttributes.additional.length > 0"
        class="row q-gutter-sm"
      >
        <div
          v-for="(p, index) in serviceAttributes.additional"
          :key="index"
          class="bordered q-px-sm surface-3"
          style="border-radius: 6px"
        >
          {{ optionStore.mapOption(p.fieldName ?? '') }}
        </div>
      </div>

      <div v-else class="col flex items-center app-text-muted">
        {{ $t('productService.service.noProperties') }}
      </div>
    </div>
  </div>
</template>
