<template>
  <div class="bulk-edition-container">
    <Banner
      :static-data="{ title: $_tr('title') }"
      :back="{
        href: {
          name: 'DashboardSummary'
        },
        title: $_tr('back')
      }"
      :background-color="$_theme('colorDashboard')"
    />

    <TemplateContainer>
      <div class="resume">
        <BaseText>
          {{ $_tr('selectedContents') }}
        </BaseText>

        <Title tag="h5">
          {{ fetchedData.map(item => item.title).join(', ') }}
        </Title>
      </div>

      <BulkEditionFormWithData
        :contents="
          fetchedData.map(item => ({
            uuid: item.uuid,
            type: item.content_type
          }))
        "
      />
    </TemplateContainer>
  </div>
</template>

<script>
import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import { BaseText, Title } from 'inside-collection/atoms'

import { http } from '@inside-library/helpers/Http'
import { withFetch } from 'inside-collection/hocs'
import BulkEditionForm from './BulkEditionForm.vue'

const fetchFormData = async () => {
  try {
    const brands = await http.get('content/brands', {
      filters: {
        'status:eq': 1
      },
      fields: ['title', 'uuid']
    })

    const countries = await http.get('content/countries', {
      filters: {
        'status:eq': 1
      },
      fields: ['title', 'uuid']
    })

    const managementModes = await http.get('content/management_modes', {
      filters: {
        'status:eq': 1
      },
      fields: ['title', 'uuid']
    })

    const profiles = await http.get('content/profiles', {
      filters: {
        'status:eq': 1
      },
      fields: ['title', 'uuid']
    })

    return {
      brands: brands.data,
      countries: countries.data,
      management_modes: managementModes.data,
      profiles: profiles.data
    }
  } catch (err) {
    throw new Error(err)
  }
}

export default {
  name: 'BulkEditionContainer',
  $_i18nRootPath: 'customs.BULK_EDITION',
  components: {
    Banner,
    TemplateContainer,
    BaseText,
    Title,
    BulkEditionFormWithData: withFetch(BulkEditionForm, {
      size: 'xxl'
    })(fetchFormData)
  },
  props: {
    fetchedData: {
      type: Array
    }
  }
}
</script>

<style lang="scss">
.bulk-edition-container {
  .resume {
    display: flex;
    align-items: center;
    grid-gap: var(--spacing-s);
  }
}
</style>
