<template>
  <div page="project-page-container">
    <Banner
      :static-data="bannerData"
      :back="{
        href: { name: 'ProjectsListingPage' },
        title: $_tr('back')
      }"
      :add="['project_documents', 'project_folders']"
      introduction-key="project_introduction"
    />

    <TemplateContainer size="l">
      <ProjectIntroduction :introduction="introduction" />

      <TwoColumnsLayout>
        <template #sidebar>
          <ProjectNews v-if="news.length" :news="news" />

          <ProjectNewsSubsidiaries
            v-if="projectNews.length"
            :news-subsidiaries="projectNews"
          />

          <ProjectUsers v-if="users.length" :users="users" />

          <RelatedProjects v-if="projects.length" :projects="projects" />

          <DownloadProject :uuid="fetchedData.uuid" />
        </template>

        <template #main>
          <ProjectInformation
            v-if="information || mainImage"
            :information="information"
            :image="$_getContentImage(mainImage, 'image-card')"
          />

          <Button class="details-button" @click="handleClick">
            {{ $_tr('button') }}
          </Button>

          <ProjectImages v-if="content" :content="content" />

          <ProjectGed v-if="fetchedData.project_folders.data.length" />

          <ProjectLocation
            v-if="geolocation.latitude && geolocation.longitude"
            :location="geolocation"
          />
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

<script>
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import TwoColumnsLayout from '@inside-commons/components/lib/TwoColumnsLayout'
import Banner from '@inside-commons/components/lib/Banner'

import { Button } from 'inside-collection/components'

import ProjectIntroduction from '../../components/projects/ProjectIntroduction'
import ProjectNews from '../../components/projects/ProjectNews'
import ProjectNewsSubsidiaries from '../../components/projects/ProjectNewsSubsidiaries'
import ProjectUsers from '../../components/projects/ProjectUsers'
import ProjectInformation from '../../components/projects/ProjectInformation'
import ProjectImages from '../../components/projects/ProjectImages'
import ProjectGed from '../../components/projects/ProjectGed'
import ProjectLocation from '../../components/projects/ProjectLocation'
import RelatedProjects from '../../components/projects/RelatedProjects'
import DownloadProject from '../../components/projects/DownloadProject'

export default {
  name: 'ProjectPage',
  $_i18nRootPath: 'customs.PROJECTS',
  components: {
    TemplateContainer,
    TwoColumnsLayout,
    Banner,
    Button,
    ProjectIntroduction,
    ProjectNews,
    ProjectNewsSubsidiaries,
    ProjectUsers,
    ProjectInformation,
    ProjectImages,
    ProjectGed,
    ProjectLocation,
    RelatedProjects,
    DownloadProject
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      introduction: {
        subsidiaries: this.getCheckedData(this.fetchedData, [
          'subsidiaries',
          'data'
        ]),
        industries: this.getCheckedData(this.fetchedData, [
          'industries',
          'title'
        ]),
        building_types: this.getCheckedData(this.fetchedData, [
          'building_types',
          'data'
        ]),
        cities: this.getCheckedData(this.fetchedData, ['cities', 'title']),
        status: this.getCheckedData(this.fetchedData, 'projects_statuses'),
        date: this.getCheckedData(this.fetchedData, ['delivery_date'])
      },
      news: this.getCheckedData(this.fetchedData, ['news', 'data']),
      projectNews: this.getCheckedData(this.fetchedData, [
        'project_news',
        'data'
      ]),
      users: this.getCheckedData(this.fetchedData, ['project_teams', 'data']),
      geolocation: {
        latitude: this.getCheckedData(this.fetchedData, ['latitude']),
        longitude: this.getCheckedData(this.fetchedData, ['longitude']),
        title: this.getCheckedData(this.fetchedData, ['title']),
        address: this.getCheckedData(this.fetchedData, ['address'])
      },
      projects: this.getCheckedData(this.fetchedData, ['projects', 'data']),
      information: this.fetchedData.project_description,
      bannerData: this.fetchedData,
      mainImage: this.fetchedData.main_image,
      content: this.fetchedData?.content
    }
  },
  methods: {
    handleClick() {
      this.triggerModal(
        'project-characteristics',
        'fetch',
        {
          item: { uuid: this.fetchedData.uuid },
          content: 'projects'
        },
        { layout: 'right', size: 'l', transition: 'fadeInLeft' }
      )
    }
  }
}
</script>

<style lang="scss">
.details-button {
  margin: var(--spacing-l) 33% var(--spacing-xl) 33%;
}
</style>
