<template>
  <Page :fetched-data="fetchedData" :image-data="image">
    <template #extra-fields>
      <section class="main-section">
        <div>
          <BaseText class="input-title-advanced-settings">
            {{ $_tr('footerImage.title') }}
          </BaseText>

          <AdvancedSettingsInputDropzone
            :default-value="fetchedData.homepage.footer_image"
            :extra-options="{ acceptedFiles: '.png,.jpg,.jpeg,.svg+xml' }"
            :form-id="formId"
            model-name="footer_image"
            @onImageUpdate="handleDataImageChange"
          />
        </div>
      </section>

      <section class="main-section">
        <div>
          <BaseText class="input-title-advanced-settings">
            {{ $_tr('eventsImageHp.title') }}
          </BaseText>

          <AdvancedSettingsInputDropzone
            :default-value="fetchedData.homepage.events_image_hp"
            :extra-options="{ acceptedFiles: '.png,.jpg,.jpeg,.svg+xml' }"
            :form-id="formId"
            model-name="events_image_hp"
            @onImageUpdate="handleDataImageChange"
          />
        </div>
      </section>
    </template>
  </Page>
</template>

<script>
import { BaseText } from 'inside-collection/atoms'

import Page from '@inside-administration/components/pages/advanced-settings/AdminAdvancedSettingsHomePage'

import AdvancedSettingsInputDropzone from '@inside-administration/components/lib/advanced-settings/AdvancedSettingsInputDropzone'

export default {
  name: 'AdminAdvancedSettingsHomePage',
  $_i18nRootPath:
    'administration.PAGES.ADVANCED_SETTINGS.adminAdvancedSettingsHomePage',
  components: {
    BaseText,
    Page,
    AdvancedSettingsInputDropzone
  },
  props: {
    fetchedData: {
      type: Object
    }
  },
  data() {
    return {
      image: {},
      formId: 'advanced-settings-homepage'
    }
  },
  methods: {
    handleDataImageChange(data) {
      this.image = { ...this.image, ...data }
    }
  }
}
</script>
