<template>
  <Container
    v-if="introduction"
    :border="false"
    :background="true"
    :background-color="$_theme('colorSecondary400')"
    class="project-introduction-container mb-xxl"
  >
    <scaffolded-data
      v-bind="{ ...getAttrs($attrs), ...$props }"
      :data="m_scaffoldedData"
      class="project-introduction-rows"
    />
  </Container>
</template>

<script>
import { markRaw } from 'vue'

import { Container } from 'inside-collection/components'
import { BaseText, PastilleText } from 'inside-collection/atoms'

import ScaffoldMixin from '@inside-library/components/commons/mixins/scaffold-props-mixin'

import { getAttrs } from '@inside-library/helpers/Attrs'

export default {
  name: 'ProjectIntroduction',
  $_i18nRootPath: 'customs.PROJECTS.introduction',
  components: { Container, BaseText },
  mixins: [ScaffoldMixin],
  props: {
    introduction: {
      type: Object,
      required: true
    }
  },
  methods: {
    getAttrs,
    defaultScaffold() {
      return [
        {
          id: 'subsidiaries',
          label: this.$_tr('subsidiaries'),
          tag: markRaw(BaseText),
          value: this.getCheckedData(this.introduction, 'subsidiaries', [])
            .map(({ title }) => title)
            .join(', '),
          data: { darkMode: true },
          hideIf: () => !this.introduction.subsidiaries.length
        },
        {
          id: 'industries',
          label: this.$_tr('industries'),
          tag: markRaw(BaseText),
          value: this.getCheckedData(this.introduction, 'industries'),
          data: { darkMode: true },
          hideIf: () => !this.introduction.industries
        },
        {
          id: 'buildingTypes',
          label: this.$_tr('buildingTypes'),
          tag: markRaw(BaseText),
          value: this.getCheckedData(this.introduction, 'building_types', [])
            .map(({ title }) => title)
            .join(', '),
          data: { darkMode: true },
          hideIf: () => !this.introduction.building_types
        },
        {
          id: 'cities',
          label: this.$_tr('cities'),
          tag: markRaw(BaseText),
          value: this.getCheckedData(this.introduction, 'cities'),
          data: { darkMode: true },
          hideIf: () => !this.introduction.cities
        },
        {
          id: 'date',
          label: this.$_tr('date'),
          tag: markRaw(BaseText),
          value: this.$_formatDate(
            this.getCheckedData(this.introduction, 'date')
          ),
          data: { darkMode: true },
          hideIf: () => !this.introduction.date
        },
        {
          label: this.$_tr('status'),
          tag: markRaw(PastilleText),
          data: {
            color:
              this.introduction?.status?.color || this.$_theme('colorLight')
          },
          children: [
            {
              tag: markRaw(BaseText),
              value: this.introduction?.status?.title,
              data: { darkMode: true }
            }
          ],
          hideIf: () => !this.introduction.status
        }
      ]
    }
  }
}
</script>

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

.project-introduction-rows {
  display: flex;
  justify-content: space-between;

  @include tablet {
    flex-direction: column;
  }

  > .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 20%;
    min-width: 100px;
    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-xs)
      var(--spacing-m);
    border-left: var(--border-default);
    border-color: white;

    @include tablet {
      margin: var(--spacing-s) 0;
      min-width: fit-content;
    }
  }

  .label {
    color: var(--color-light);
    font-family: var(--font-primary);
    font-size: var(--font-size-labor);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
  }
}
</style>
