<script>
import { markRaw } from 'vue'

import { Title, BaseText } from 'inside-collection/atoms'
import AgendaModal from '@inside-agenda/modals/AgendaModal'
import AgendaModalActionsCustoms from './../../inside-customs/components/agenda/AgendaModalActionsCustoms'

export default {
  name: 'agenda-modal',
  components: {
    Title,
    BaseText,
    AgendaModalActionsCustoms
  },
  extends: AgendaModal,
  data() {
    return {
      selection: {
        title: 'title',
        category: 'rooms_category',
        image: 'image',
        capacity: 'capacity',
        floor: 'floor',
        cateringServices: 'catering_services.data',
        informationTechnologies: 'information_technologies.data',
        uuid: 'uuid',
        body: 'body',
        room_description: 'room_description'
      }
    }
  },
  methods: {
    scaffold(fields) {
      return {
        sections: [
          {
            fields: [
              {
                class: 'modal-title',
                children: [
                  {
                    tag: markRaw(Title),
                    data: { tag: 'h3' },
                    value: fields.title
                  },
                  {
                    tag: 'span',
                    value: fields.category.title,
                    class: 'category',
                    data: { style: { backgroundColor: fields.category.color } }
                  }
                ]
              },
              ...this.insertIf(fields.image, {
                tag: 'img',
                data: { src: this.$_getContentImage(fields.image) },
                alt: fields.image
              }),
              ...this.insertIf(fields.body, {
                value: fields.body,
                html: true
              }),
              ...this.insertIf(fields.room_description, {
                label: this.$_tr('room_description'),
                value: fields.room_description,
                html: true
              }),
              ...this.insertIf(fields.capacity || fields.floor, {
                label: this.$_tr('caracteristics'),
                class: 'caracteristics',
                children: [
                  ...this.insertIf(fields.capacity, {
                    tag: markRaw(BaseText),
                    value: `<span class="bold">${this.$_tr(
                      'capacity'
                    )} :</span> ${fields.capacity}`,
                    html: true
                  }),
                  ...this.insertIf(fields.floor, {
                    tag: markRaw(BaseText),
                    value: `<span class="bold">${this.$_tr('floor')} :</span> ${
                      fields.floor
                    }`,
                    html: true
                  })
                ]
              }),
              ...this.insertIf(fields.informationTechnologies.length, {
                label: this.$_tr('it'),
                children: fields.informationTechnologies.map(it => {
                  return {
                    tag: markRaw(BaseText),
                    class: 'bold',
                    value: `- ${it.title}`
                  }
                })
              }),
              ...this.insertIf(fields.cateringServices.length, {
                label: this.$_tr('catering'),
                children: fields.cateringServices.map(it => {
                  return {
                    tag: markRaw(BaseText),
                    class: 'bold',
                    value: `- ${it.title}`
                  }
                })
              }),
              {
                tag: AgendaModalActionsCustoms,
                data: {
                  heritedData: fields,
                  heritedOptions: this.heritedOptions
                }
              }
            ]
          }
        ]
      }
    }
  }
}
</script>
