<script>
import { markRaw } from 'vue'

import DefaultModal from '@inside-modals/default/DefaultModal'
import Full from '@inside-news/components/lib/Full'
import CarpoolInfos from './CarpoolInfos'

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

export default {
  name: 'CarpoolModal',
  $_i18nRootPath: 'customs.CARPOOLING.MODAL',
  components: {
    Full,
    CarpoolInfos
  },
  extends: DefaultModal,
  data() {
    return {
      selection: {
        title: 'title',
        content_type: 'content_type',
        published_at: 'published_at',
        introduction: 'introduction',
        authors: 'authors',
        departureCity: 'departure_cities.title',
        arrivalCity: 'arrival_cities.title',
        moveHour: 'move_hours.title'
      }
    }
  },
  methods: {
    fullOverrides(data, { deleteItems, replaceItem, addItemAfter }) {
      deleteItems(
        'bottom-actions',
        'bookmarks',
        'likes',
        'statistics',
        'comments',
        'print'
      )

      replaceItem('content', {
        id: 'introduction',
        tag: markRaw(BaseText),
        value: data.introduction
      })

      addItemAfter('introduction', {
        id: 'moveHours',
        tag: markRaw(CarpoolInfos),
        data: {
          moveHour: data.moveHour,
          departureCity: data.departureCity,
          arrivalCity: data.arrivalCity
        }
      })
    },
    scaffold(fields) {
      return {
        sections: [
          {
            fields: [
              {
                tag: markRaw(Full),
                data: {
                  ...fields,
                  categoriesConfig: {},
                  scaffoldOverrides: this.fullOverrides,
                  printable: false
                },
                class: 'carpool-modal-content'
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
.carpool-modal-content {
  .author .user-card-container {
    margin-top: var(--spacing-s);
  }
}
</style>
