<template>
  <div id="orders-form" class="form-order-container">
    <HeaderForm v-bind="fetchedData">
      <global-form
        v-if="fetchedData"
        :format-data="formatData"
        :prevent-submit="preventSubmit"
        :submit-button-text="$_tr('order.form.post')"
        form-id="orders-form"
        endpoint="content/orders"
      >
        <template #fields>
          <div
            v-for="category in fetchedData.supplies_categories"
            :key="category.title"
            class="category"
          >
            <AccordionCategory :category="category.title" class="mt-l">
              <input-parent
                v-for="supply in category.supplies.data"
                :key="supply.uuid"
                :model-name="`product_${supply.uuid}`"
                form-id="orders-form"
              >
                <SelectProductQuantity
                  v-bind="supply"
                  :name="supply.title"
                  :category="category.title"
                  :parent="`product_${supply.uuid}`"
                  form-id="orders-form"
                  @onQuantityChange="handleQuantityChange"
                />
              </input-parent>
            </AccordionCategory>
          </div>

          <input-textarea
            form-id="orders-form"
            model-name="description"
            :label="$_tr('fields.description')"
          />

          <input-hidden
            form-id="orders-form"
            model-name="author"
            :default-value="getUserInfos.uuid"
            :rules="['required']"
          />

          <input-hidden
            form-id="orders-form"
            model-name="new_author"
            :default-value="getUserInfos.uuid"
            :rules="['required']"
          />

          <input-hidden
            form-id="orders-form"
            model-name="bundle"
            default-value="orders"
            :rules="['required']"
          />

          <input-hidden
            form-id="orders-form"
            model-name="type"
            default-value="node"
            :rules="['required']"
          />

          <input-hidden
            form-id="orders-form"
            model-name="title"
            :default-value="requestTitle"
            :rules="['required']"
          />
        </template>
      </global-form>

      <section class="form-aside-container">
        <aside class="form-aside">
          <OrderAsideBlock type="myOrders" />

          <OrderAsideBlock
            v-if="
              getUserInfos.permissions.roles.includes('facilities_team') ||
                getUserInfos.permissions.roles.includes('super_administrator')
            "
            type="admin"
          />
        </aside>
      </section>
    </HeaderForm>
  </div>
</template>

<script>
import OrderAsideBlock from '../../components/supplies/OrderAsideBlock'
import HeaderForm from '../../components/supplies/HeaderForm'
import SelectProductQuantity from '../../components/supplies/SelectProductQuantity'
import AccordionCategory from '../../components/supplies/AccordionCategory'

import Random from '@inside-library/helpers/GenerateID'

export default {
  name: 'OrderFormPage',
  $_i18nRootPath: 'customs.SUPPLIES',
  components: {
    OrderAsideBlock,
    HeaderForm,
    SelectProductQuantity,
    AccordionCategory
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      requestTitle: `supplies-order-${Random.ID()}`,
      quantities: [],
      isOpen: true
    }
  },
  mounted() {
    this.$store.commit('setContentMainsActions', {
      add: ['supplies', 'supplies_categories'],
      edit: {
        uuid: this.fetchedData.uuid,
        contentType: this.fetchedData.content_type,
        admin: this.fetchedData.admin
      }
    })
  },
  methods: {
    formatData(data) {
      if (this.quantities.length) {
        return {
          author: data.author,
          new_author: data.author,
          bundle: data.bundle,
          title: data.title,
          type: data.type,
          description: data.description,
          quantity: JSON.stringify(this.quantities)
        }
      } else {
        this.$_triggerErrorToast({
          text: this.$_tr('customs.SUPPLIES.order.form.error')
        })
      }
    },
    handleQuantityChange(data) {
      const index = this.quantities.findIndex(el => el.uuid === data.uuid)

      if (data.quantity === '0') {
        this.quantities.splice(index, 1)
      } else {
        index !== -1
          ? (this.quantities[index] = data)
          : this.quantities.push(data)
      }

      return data
    }
  }
}
</script>

<style lang="scss">
@use "../../styles/modules/inside-customs/order-form.scss" as *;
</style>
