<template>
  <global-form
    :form-id="formId"
    :submit-button-text="$_tr('edit')"
    endpoint="bclh/bulkupdate"
    class="bulk-edition-form"
    @onRequestSuccess="onSuccess"
  >
    <template #fields>
      <div
        v-for="content in Object.keys(fetchedData)"
        :key="content"
        class="mt-xl"
      >
        <BaseText>
          {{ $_tr(`inputs.${content}`) }}
        </BaseText>

        <Treeselect
          v-model="currentValues[content]"
          :options="fetchedData[content]"
          :normalizer="normalizer"
          :multiple="true"
          :placeholder="$_tr('inputs.placeholder')"
          @update:modelValue="value => onDataChange(value, content)"
        />

        <div class="input-actions">
          <p @click="selectAll(content)">
            {{ $_tr('selectAll') }}
          </p>

          <span>/</span>

          <p @click="unselectAll(content)">
            {{ $_tr('unselectAll') }}
          </p>
        </div>
      </div>

      <input-selectbox
        :form-id="formId"
        :label="$_tr('inputs.users')"
        :label-callback="user => $_username(user)"
        :async="{
          contentType: 'users',
          fields: ['uuid', 'lastname', 'firstname', 'image'],
          filters: {
            'is_maintenance:eq': 0,
            'status:eq': 1
          }
        }"
        :multiple="true"
        :extra-options-callback="user => ({ image: user.image })"
        model-name="users"
        object-value-key="uuid"
      >
        <template #default="{ node }">
          <UserItemSelectbox
            :username="getCheckedData(node, ['raw', 'label'])"
            :image="getCheckedData(node, ['raw', 'extraOptions', 'image'])"
          />
        </template>
      </input-selectbox>

      <input-hidden
        :form-id="formId"
        :default-value="contents"
        model-name="contents"
      />
    </template>
  </global-form>
</template>

<script>
import { BaseText } from 'inside-collection/atoms'
import UserItemSelectbox from '@inside-forms/displays/sub-components/fields-slots/UserItemSelectbox'
import { formatHref } from '@inside-library/helpers/Langs'

import Treeselect from '@zanmato/vue3-treeselect'
import '@zanmato/vue3-treeselect/dist/vue3-treeselect.min.css'

export default {
  name: 'BulkEditionForm',
  $_i18nRootPath: 'customs.BULK_EDITION_FORM',
  components: {
    BaseText,
    UserItemSelectbox,
    Treeselect
  },
  props: {
    fetchedData: {
      type: Object
    },
    contents: {
      type: Array
    }
  },
  data() {
    return {
      formId: 'bulk-edition-form',
      currentValues: {
        brands: [],
        countries: [],
        management_modes: [],
        profiles: []
      },
      normalizer: node => {
        return {
          id: node.uuid,
          label: node.title
        }
      }
    }
  },
  mounted() {
    if (this.fetchedData) {
      for (const content of Object.keys(this.fetchedData)) {
        this.$store.commit('setFieldProperty', {
          id: this.formId,
          name: content,
          value: null,
          formattedValue: null
        })
      }
    }
  },
  methods: {
    selectAll(content) {
      this.currentValues[content] = this.fetchedData[content].map(
        item => item.uuid
      )
    },
    unselectAll(content) {
      this.currentValues[content] = []
    },
    onDataChange(value, modelName) {
      this.$store.commit('setFieldProperty', {
        id: this.formId,
        name: modelName,
        value: Array.isArray(value) && value.length > 0 ? value : null,
        formattedValue: Array.isArray(value) && value.length > 0 ? value : null
      })
    },
    onSuccess() {
      this.$route.push(
        formatHref(
          {
            name: 'DashboardSummary'
          },
          this.$_currentLang
        )
      )
    }
  }
}
</script>

<style lang="scss">
.bulk-edition-form {
  .vue3-treeselect__control {
    border: none;
    border-bottom: 1px solid rgba(var(--color-grey-rgb), 0.5);
    border-radius: 0;
    padding-left: 0;

    .vue3-treeselect__placeholder {
      padding-left: 0;
    }

    .vue3-treeselect__input-container {
      padding-left: 0;
    }

    .vue3-treeselect__multi-value-item {
      background: var(--color-dashboard);
      color: var(--color-light);

      .vue3-treeselect__value-remove {
        color: var(--color-light);
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.bulk-edition-form {
  .input-actions {
    display: flex;
    color: var(--color-grey-400);
    font-size: var(--font-size-tiny);
    align-items: center;
    grid-gap: var(--spacing-s);
    margin-top: var(--spacing-s);

    p {
      color: var(--color-grey-400);
      cursor: pointer;

      @include transition(color 0.4s);

      &:hover {
        color: var(--color-primary);
      }
    }
  }
}
</style>
