<template>
  <div class="homepage-block-wrapper-container">
    <div class="header">
      <div>
        <h2>{{ $_tr('title', [fetchedData.title, client.title]) }}</h2>
      </div>

      <div v-if="showEdit" class="actions">
        <edit-content-btn-ui
          v-if="
            (getCheckedData(fetchedData.admin, ['permission', 'update']) &&
              fetchedData.content_type) ||
              getUserInfos.is_key_account_manager
          "
          :edition-link="
            `/edit/${fetchedData.content_type}/${fetchedData.uuid}`
          "
        />

        <IconTextButton
          v-if="getUserInfos.is_key_account_manager"
          class="export"
          icon="download"
          appearance="primary"
          @click="generateImage"
        >
          {{ $_tr('export') }}
        </IconTextButton>
      </div>
    </div>

    <div class="homepage-block-wrapper">
      <HomepageBlockDashboard
        v-for="block in blocks"
        :key="block.id"
        :title="fetchedData[`block_${block.id}_title`]"
        :kpi="fetchedData[`block_${block.id}_kpi`]"
        :headline="fetchedData[`block_${block.id}_text`]"
        :modal-text="fetchedData[`block_${block.id}_modal_text`]"
        :modal-file="fetchedData[`block_${block.id}_modal_file`]"
        :image="`block-${block.id}.png`"
        :position="block.position"
        :background-color="block.background"
        :large="block.large"
        :order="block.order"
      />
    </div>
  </div>
</template>

<script>
import HomepageBlockDashboard from './HomepageBlockDashboard'
import DashboardGenerator from '../../mixins/dashboard-generator'

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

export default {
  name: 'homepage-block-wrapper',
  $_i18nRootPath: 'customs.HOMEPAGE.dashboard',
  components: {
    HomepageBlockDashboard,
    IconTextButton
  },
  mixins: [DashboardGenerator],
  props: {
    fetchedData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      client: this.getStore('getUserInformation', 'client') || {},
      showEdit: true
    }
  },
  computed: {
    blocks() {
      return [
        {
          id: '1',
          position: 'right',
          background: this.$_theme('dashboardColor1')
        },
        {
          id: '2',
          position: 'left',
          background: this.$_theme('dashboardColor2')
        },
        {
          id: '3',
          background: this.$_theme('dashboardColor3')
        },
        {
          id: '4',
          background: this.$_theme('dashboardColor4')
        },
        {
          id: '5',
          position: 'left',
          background: this.$_theme('dashboardColor5')
        },
        {
          id: '6',
          large: true,
          background: this.$_theme('dashboardColor6')
        },
        {
          id: '7',
          position: 'right',
          background: this.$_theme('dashboardColor7'),
          order: true
        },
        {
          id: '8',
          position: 'left',
          background: this.$_theme('dashboardColor8'),
          order: true
        },
        {
          id: '9',
          background: this.$_theme('dashboardColor9'),
          order: true
        },
        {
          id: '10',
          background: this.$_theme('dashboardColor10'),
          order: true
        },
        {
          id: '11',
          background: this.$_theme('dashboardColor11'),
          order: true
        }
      ]
    }
  },
  methods: {
    generateImage() {
      const action = () => {
        this.showEdit = false

        this.generateDashboard(this.fetchedData.title, this.client.title)
      }

      const content = {
        item: {
          body: this.$_tr('modal.text'),
          actionTitle: this.$_tr('modal.button')
        },
        content: 'action'
      }

      this.triggerModal('action', 'static', content, {
        layout: 'center',
        action,
        transition: 'fadeIn'
      })
    }
  }
}
</script>

<style lang="scss">
.homepage-block-wrapper-container {
  .header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    h2 {
      color: var(--color-primary);
      padding-bottom: var(--spacing-l);

      @include H2;

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: var(--spacing-xxl);
        border-bottom: var(--spacing-s) solid var(--dashboard-color-3);
      }
    }

    .actions {
      display: flex;
      flex-direction: row;
      align-items: center;

      @include tablet {
        flex-direction: column;
      }

      a {
        margin-right: var(--spacing-m);

        @include tablet {
          margin-right: 0;
        }
      }
    }
  }

  .homepage-block-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--spacing-m);
    margin-top: var(--spacing-l);

    @include tablet {
      grid-template-columns: repeat(2, 1fr);
    }

    @include mobile {
      grid-template-columns: 1fr;
    }
  }
}
</style>
