<script>
import DefaultModal from '@inside-modals/default/DefaultModal'

import { Title } from 'inside-collection/atoms'

export default {
  name: 'ProjectCharacteristicsModal',
  $_i18nRootPath: 'customs.PROJECTS.MODAL',
  components: { Title },
  extends: DefaultModal,
  data() {
    return {
      fieldsToDisplay: null,
      fieldTemplateByType: {
        boolean: field => {
          return { value: this.$_tr(field[1]) }
        },
        string: field => {
          return { ...(field[1] && { value: field[1], data: { html: true } }) }
        },
        number: field => {
          return {
            ...(field[1] && { value: this.$_formatDate(field[1], 'L') })
          }
        },
        image: field => {
          return {
            ...(field[1].main && {
              tag: 'img',
              data: {
                src: this.$_getContentImage(field[1], 'image-card')
              }
            })
          }
        },
        singleObject: field => {
          return { ...(field[1] && { value: field[1].title }) }
        },
        multipleObject: field => {
          let contentFields = []

          return {
            ...(field[1].data.length && {
              value: field[1].data
                .map(item => {
                  if (item.content_type === 'commercial_firms') {
                    contentFields.push(
                      item.title,
                      item.contact,
                      item.email,
                      item.address,
                      item.zipcode,
                      item.cities?.title,
                      item.opening_time,
                      item.phone,
                      item.phone_mentions
                    )

                    let filteredFields = contentFields.filter(item => !!item)

                    return filteredFields.join('<br/>')
                  } else {
                    return item.title || this.$_username(item)
                  }
                })
                .join(', '),
              data: { html: true }
            })
          }
        },
        paragraphs: field => {
          return {
            tag: 'paragraph-listing',
            data: {
              heritedData: field[1],
              heritedOptions: { template: true }
            }
          }
        }
      }
    }
  },
  methods: {
    buildFields() {
      return Object.entries(this.fieldsToDisplay)
        .filter(field => !!field[1])
        .map(field => {
          const defaultTemplate = {
            label: this.$_tr(field[0]),
            class: field[0].replace('_', '-')
          }

          let fieldType

          if (typeof field[1] !== 'object') {
            fieldType = typeof field[1]
          } else {
            if (field[1].webp) {
              fieldType = 'image'
            } else if (field[1].title) {
              fieldType = 'singleObject'
            } else if (field[1].data) {
              fieldType = 'multipleObject'
            } else fieldType = 'paragraphs'
          }

          const templateSpecifics = this.fieldTemplateByType[fieldType](field)
          const objectTemplate = { ...defaultTemplate, ...templateSpecifics }

          return objectTemplate
        })
    },
    scaffold(fields) {
      this.fieldsToDisplay = fields

      const modalFields = this.buildFields()

      return {
        sections: [
          {
            class: 'project-characteristics-modal',
            fields: modalFields
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.project-characteristics-modal {
  .modal__section__content {
    display: grid;
    grid-template-columns: 1fr 1fr;

    @include tablet {
      grid-template-columns: 1fr;
    }

    @include desktop-only {
      .item:nth-child(odd) {
        padding-right: var(--spacing-l);
      }

      .item:nth-child(even) {
        padding-left: var(--spacing-l);
        border-left: var(--border-default);
      }
    }

    .item.title {
      margin-top: var(--spacing-l);
    }
  }
}
</style>
