<template>
  <div class="brand-forms">
    <div class="brand-forms__wrapper">
      <aside>
        <Title tag="h3">{{ $_tr('toKnow') }}</Title>

        <BaseText :html="true">{{ fetchedData.introduction }}</BaseText>
      </aside>

      <main>
        <Title tag="h1">{{ fetchedData.title }}</Title>

        <BrandFormsGenerator
          :formID="formID"
          :fieldsArray="getFormData.fields"
          :filename="getFormData.filename"
          :width="getFormData.width"
          :height="getFormData.height"
          :template-type="getType"
        />
      </main>
    </div>

    <div class="brand-forms__tpl">
      <div>
        <div id="brand-forms__preview" class="brand-forms__tpl__header">
          <Title tag="h3">{{ $_tr('preview') }}</Title>
        </div>

        <div class="brand-forms__tpl__content">
          <component
            :is="getTemplate"
            :tplData="getCurrentTemplateData"
            :tplPlaceholder="getCurrentTemplatePlaceholder"
            :tplType="getType"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BrandFormsGenerator from '../components/brand-forms/BrandFormsGenerator'
import Forms from '../components/brand-forms/forms'

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

export default {
  name: 'BrandFormPage',
  $_i18nRootPath: 'customs.BRAND_FORMS',
  components: { BrandFormsGenerator, Forms, Title, BaseText },
  props: {
    fetchedData: {
      type: Object
    }
  },
  data() {
    return {
      formID: this.fetchedData.form_id
    }
  },
  computed: {
    /**
     * Get form json and template
     * @return {Object}
     */
    getForm() {
      return Forms[this.formID]
    },
    /**
     * Get type
     * @return {String}
     */
    getType() {
      const splittedFormID = this.formID.split('_')

      return splittedFormID[1]
    },
    /**
     * Get right form data
     * @return {Array}
     */
    getFormData() {
      return this.getForm.formData
    },
    /**
     * Get right signature or card template
     * @return {Object}
     */
    getTemplate() {
      return this.getForm.template
    },
    /**
     * Get current form values
     * @return {Object}
     */
    getCurrentTemplateData() {
      return this.$store.getters.getCurrentTemplateData
    },
    /**
     * Format an object of placeholder for each field
     * @return {Object}
     */
    getCurrentTemplatePlaceholder() {
      const placeholders = {}

      for (let y = 0; y < this.getFormData.fields.length; y++) {
        const field = this.getFormData.fields

        placeholders[field[y].name] =
          field[y].type === 'text'
            ? field[y].label[this.$_currentLang]
            : field[y].placeholder
      }

      return placeholders
    }
  },
  mounted() {
    this.$store.commit('setContentMainsActions', {
      edit: {
        uuid: this.fetchedData.uuid,
        contentType: 'brand_forms',
        admin: this.fetchedData.admin
      }
    })
  }
}
</script>

<style scoped lang="scss">
.brand-forms {
  position: relative;

  &::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    height: 250px;
    content: '';
  }

  .ds-title-container {
    margin-bottom: var(--spacing-m);
  }

  &__wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    width: 880px;
    max-width: 90%;
    padding-top: calc(var(--spacing-l) + var(--spacing-xl));
    margin: auto;

    aside,
    main {
      position: relative;
    }

    aside {
      top: 80px;
      left: 15px;
      z-index: 2;
      width: 310px;
      padding: calc(var(--spacing-l) + var(--spacing-m));
      color: var(--color-text);
      background: var(--color-grey-100);
      text-align: center;

      .ds-base-text-container {
        line-height: 24px;
        font-size: var(--font-size-h5);
      }
    }

    main {
      z-index: 1;
      left: -15px;
      width: calc(100% - 310px);
      padding: var(--spacing-3xl);
      background: var(--color-light);
      box-shadow: var(--shadow-default);

      .ds-title-container {
        text-align: center;
      }
    }
  }

  &__tpl {
    display: flex;
    justify-content: center;
    margin: var(--spacing-xxl) 0;
  }
}

.inside-radius {
  .brand-forms {
    &__wrapper {
      aside,
      main {
        border-radius: var(--radius-m);
      }
    }
  }
}
</style>

<style lang="scss">
.brand-forms--card {
  flex-direction: column;
}
</style>
