<script setup lang="ts">
import useOptionStore from 'src/stores/options';
import { Attributes } from 'src/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="col-3 app-text-muted">
    • {{ $t(`formDialogTitleInformation`) }}
    <div>
      <q-btn
        :disable="readonly"
        dense
        unelevated
        outline
        class="q-mt-sm q-px-sm"
        color="primary"
        @click="$emit('serviceProperties')"
      >
        <Icon
          icon="basil:settings-adjust-solid"
          width="24px"
          class="q-mr-sm"
          style="color: var(--brand-1)"
        />
        {{ $t('properties') }}
      </q-btn>
    </div>
  </div>

  <div class="col-9 row">
    <div
      v-if="serviceAttributes.additional.length > 0"
      class="col q-gutter-sm row items-center"
    >
      <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('noProperties') }}
    </div>
  </div>
</template>
