Probar;
com;
muchos;
campos;

import Vue from 'vue';
import { mapActions, mapGetters } from 'vuex';

import { ApiEnum, CrudDataTypeEnum, FilterTypeEnum } from '../enums';

import {
  ApiError,
  Dictionary,
  Filter,
  RegularFilter,
  RegularFilterConfig,
  RegularFilterSelectedValues,
  RegularFilterValueConfig,
  ToolConfig
} from '../models';

import { ROUTER_CONSTS } from '../router';

import { CONFIG_CONSTS } from '../store/config/config.consts';
import { CONTEXT_CONSTS } from '../store/context/context.consts';
import { CRUD_CONSTS } from '../store/crud/crud.consts';

export const CrudFormMixin = {
  computed: {
    ...mapGetters(CONFIG_CONSTS.moduleName, {
      environmentConfig: CONFIG_CONSTS.getters.currentEnvironment
    }),
    ...mapGetters(CONTEXT_CONSTS.moduleName, {
      context: CONTEXT_CONSTS.getters.context
    }),
    ...mapGetters(CRUD_CONSTS.moduleName, {
      state: CRUD_CONSTS.getters.state
    }),
    toolConfig: function (): ToolConfig {
      const toolsConfig = this.environmentConfig.tools;
      return Object.assign({ pivotIds: [] }, (!!toolsConfig && toolsConfig.default), (!!toolsConfig && toolsConfig[this.dataType]));
    },
    pivots: function (): Dictionary<RegularFilter> {
      return (Object.values(this.context.filters).reduce((pivots: Dictionary<RegularFilter>, filter: Filter) => {
        if (this.toolConfig.pivotIds.includes(filter.config.id)) {
          const filterConfig = (filter.config as RegularFilterConfig);
          pivots[filter.config.id] = {
            config: {
              ...filterConfig,
              mandatory: true
            },
            selectedValues: this.getFilterSelectedValues(filterConfig)
          };
        }
        return pivots;
      }, {}) as Dictionary<RegularFilter>);
    },
    pivots: function () {
      return {
        lang: {
          config: {
            id: 'lang',
            type: FilterTypeEnum.REGULAR,
            mandatory: true,
            values: [
              {
                id: 'en'
              }
            ]
          },
          selectedValues: []
        },
        division2: {
          config: {
            id: 'section',
            prettyName: 'Division',
            type: FilterTypeEnum.REGULAR,
            mandatory: true,
            values: [
              {
                id: '011'
              },
              {
                id: '014'
              },
              {
                id: '016'
              },
              {
                id: '018'
              },
              {
                id: '021'
              },
              {
                id: '024'
              },
              {
                id: '025'
              },
              {
                id: '026'
              },
              {
                id: '029'
              },
              {
                id: '034'
              },
              {
                id: '035'
              },
              {
                id: '090'
              },
              {
                id: '105'
              },
              {
                id: '531'
              },
              {
                id: '534'
              },
              {
                id: '615'
              },
              {
                id: '620'
              },
              {
                id: '660'
              },
              {
                id: '701'
              },
              {
                id: '703'
              },
              {
                id: '704'
              },
              {
                id: '705'
              },
              {
                id: '706'
              },
              {
                id: '708'
              }
            ]
          },
          selectedValues: []
        },
        division3: {
          config: {
            id: 'section',
            prettyName: 'Division',
            type: FilterTypeEnum.REGULAR,
            mandatory: true,
            values: [
              {
                id: '011'
              },
              {
                id: '014'
              },
              {
                id: '016'
              },
              {
                id: '018'
              },
              {
                id: '021'
              },
              {
                id: '024'
              },
              {
                id: '025'
              },
              {
                id: '026'
              },
              {
                id: '029'
              },
              {
                id: '034'
              },
              {
                id: '035'
              },
              {
                id: '090'
              },
              {
                id: '105'
              },
              {
                id: '531'
              },
              {
                id: '534'
              },
              {
                id: '615'
              },
              {
                id: '620'
              },
              {
                id: '660'
              },
              {
                id: '701'
              },
              {
                id: '703'
              },
              {
                id: '704'
              },
              {
                id: '705'
              },
              {
                id: '706'
              },
              {
                id: '708'
              }
            ]
          },
          selectedValues: []
        },
        division5: {
          config: {
            id: 'section',
            prettyName: 'Division',
            type: FilterTypeEnum.REGULAR,
            mandatory: true,
            values: [
              {
                id: '011'
              },
              {
                id: '014'
              },
              {
                id: '016'
              },
              {
                id: '018'
              },
              {
                id: '021'
              },
              {
                id: '024'
              },
              {
                id: '025'
              },
              {
                id: '026'
              },
              {
                id: '029'
              },
              {
                id: '034'
              },
              {
                id: '035'
              },
              {
                id: '090'
              },
              {
                id: '105'
              },
              {
                id: '531'
              },
              {
                id: '534'
              },
              {
                id: '615'
              },
              {
                id: '620'
              },
              {
                id: '660'
              },
              {
                id: '701'
              },
              {
                id: '703'
              },
              {
                id: '704'
              },
              {
                id: '705'
              },
              {
                id: '706'
              },
              {
                id: '708'
              }
            ]
          },
          selectedValues: []
        },
        division: {
          config: {
            id: 'section',
            prettyName: 'Division',
            type: FilterTypeEnum.REGULAR,
            mandatory: true,
            values: [
              {
                id: '011'
              },
              {
                id: '014'
              },
              {
                id: '016'
              },
              {
                id: '018'
              },
              {
                id: '021'
              },
              {
                id: '024'
              },
              {
                id: '025'
              },
              {
                id: '026'
              },
              {
                id: '029'
              },
              {
                id: '034'
              },
              {
                id: '035'
              },
              {
                id: '090'
              },
              {
                id: '105'
              },
              {
                id: '531'
              },
              {
                id: '534'
              },
              {
                id: '615'
              },
              {
                id: '620'
              },
              {
                id: '660'
              },
              {
                id: '701'
              },
              {
                id: '703'
              },
              {
                id: '704'
              },
              {
                id: '705'
              },
              {
                id: '706'
              },
              {
                id: '708'
              }
            ]
          },
          selectedValues: []
        }
      };
    },
    visiblePivots: function (): RegularFilter[] {
      return Object.values(this.pivots).filter((pivot: RegularFilter) => pivot.config.values.length > 1);
    },
    filters: function (): Dictionary<RegularFilter> {
      return (Object.values(this.context.filters).reduce((filters: Dictionary<RegularFilter>, filter: Filter) => {
        if ((filter.config.type === FilterTypeEnum.REGULAR) && !this.toolConfig.pivotIds.includes(filter.config.id)) {
          const filterConfig = (filter.config as RegularFilterConfig);
          filters[filter.config.id] = {
            config: filterConfig,
            selectedValues: this.getFilterSelectedValues(filterConfig)
          };
        }
        return filters;
      }, {}) as Dictionary<RegularFilter>);
    },
    valid: function (): boolean {
      return !Object.values(this.pivots).concat(Object.values(this.filters)).some((filter: RegularFilter) =>
        (filter.config.mandatory && !filter.selectedValues.length));
    }
  },
  data: function () {
    return {
      dataType: undefined,
      item: {},
      updateMode: false,
      serviceErrorsFields: [],
      files: undefined,
      messages: {
        create: {
          success: undefined
        },
        update: {
          success: undefined
        }
      }
    };
  },
  props: {
    loading: Object
  },
  methods: {
    ...mapActions(CRUD_CONSTS.moduleName, {
      read: CRUD_CONSTS.actions.read,
      create: CRUD_CONSTS.actions.create,
      update: CRUD_CONSTS.actions.update,
      delete: CRUD_CONSTS.actions.delete
    }),
    onItemLoad: function (): void {
      Object.values(this.pivots).concat(Object.values(this.filters)).forEach((filter: RegularFilter) => {
        if (filter.config.mandatory && !filter.selectedValues.length) {
          const filterDefaultValueId = (filter.config.defaultValueId ||
            ((filter.config.values.length === 1) && filter.config.values[0].id));
          if (!!filterDefaultValueId) {
            this.onFilterChange(filter, [filterDefaultValueId]);
          }
        }
      });
    },
    getFilterSelectedValues: function (filterConfig: RegularFilterConfig): RegularFilterSelectedValues {
      const filterId = (filterConfig.taggingId || filterConfig.id);
      let itemFilterValues: (string[] | string);
      if (this.toolConfig.pivotIds.includes(filterConfig.id)) {
        itemFilterValues = this.item.context.pivots[filterId];
      } else if (!!this.item.filters) {
        itemFilterValues = this.item.filters[filterId];
      }
      if (!Array.isArray(itemFilterValues)) {
        itemFilterValues = (!!itemFilterValues ? [itemFilterValues] : []);
      }
      return itemFilterValues.map((itemFilterValue: string) => {
        const itemFilterValueConfig = filterConfig.values.find((valueConfig: RegularFilterValueConfig) =>
          ((valueConfig.taggingId || valueConfig.id) === itemFilterValue));
        return ((!!itemFilterValueConfig && itemFilterValueConfig.id) || itemFilterValue);
      });
    },
    onFilterChange: function (filter: RegularFilter, selectedValues: RegularFilterSelectedValues): void {
      let itemFilterValues: (string[] | string) = selectedValues.map((selectedValue: string) => {
        const selectedValueConfig = filter.config.values.find((valueConfig: RegularFilterValueConfig) =>
          (valueConfig.id === selectedValue));
        return (selectedValueConfig.taggingId || selectedValueConfig.id);
      });
      if (filter.config.multiselectDisabled) {
        itemFilterValues = itemFilterValues[0];
      }
      const filterId = (filter.config.taggingId || filter.config.id);
      let itemFiltersObject;
      if (this.toolConfig.pivotIds.includes(filter.config.id)) {
        itemFiltersObject = this.item.context.pivots;
      } else {
        itemFiltersObject = this.item.filters;
      }
      Vue.set(itemFiltersObject, filterId, itemFilterValues);
    },
    onAccept: async function (): Promise<void> {
      this.$emit('updateLoading', { visible: true });
      try {
        if (!this.updateMode) {
          await this.create({ dataType: this.dataType, items: [this.item], files: this.files });
          this.$emit('showSnackbar', this.messages.create.success);
        } else {
          await this.update({ dataType: this.dataType, items: [this.item], files: this.files });
          this.$emit('showSnackbar', this.messages.update.success);
        }
        this.$emit('updateLoading', { visible: false });
        this.$router.push({
          name: this.$route.meta.parentRouteName
        });
      } catch (error) {
        const apiEnum = this.getApiEnum();
        const errorResponse: ApiError = this.$epb.utils.decodeErrorResponse(error, apiEnum);
        if (!!errorResponse.details && (errorResponse.status === 400)) {
          this.serviceErrorsFields = errorResponse.details.fields;
        } else {
          this.$emit('showError', this.$epb.utils.decodeErrorMessage(error, apiEnum));
        }
        this.$emit('updateLoading', { visible: false });
      }
    },
    getApiEnum: function (): ApiEnum {
      if (this.dataType === CrudDataTypeEnum.USERS) {
        return ApiEnum.USERS;
      }
      return ApiEnum.PLAY;
    },
    onCancel: function (): void {
      this.$router.push({
        name: this.$route.meta.parentRouteName
      });
    },
    onDisableConflict: async function (item): Promise<void> {
      this.$emit('updateLoading', { visible: true });
      try {
        await this.update({
          dataType: this.dataType, items: [
            {
              ...item,
              enabled: false
            }
          ]
        });
        this.$emit('showSnackbar', this.messages.conflicts.disable.success);
        this.removeConflictFromErrorsFields(item);
      } catch (error) {
        this.$emit('showError', this.$epb.utils.decodeErrorMessage(error, this.getApiEnum()));
      } finally {
        this.$emit('updateLoading', { visible: false });
      }
    },
    onDeleteConflict: async function (item): Promise<void> {
      this.$emit('updateLoading', { visible: true });
      try {
        await this.delete({ dataType: this.dataType, ids: [item.id] });
        this.$emit('showSnackbar', this.messages.conflicts.delete.success);
        this.removeConflictFromErrorsFields(item);
      } catch (error) {
        this.$emit('showError', this.$epb.utils.decodeErrorMessage(error, this.getApiEnum()));
      } finally {
        this.$emit('updateLoading', { visible: false });
      }
    },
    removeConflictFromErrorsFields: function (item): void {}
  },
  created: async function (): Promise<void> {
    const id = this.$route.params[ROUTER_CONSTS.params.id];
    if (!!id) {
      let item = this.state.data.find((dataItem: any) => (dataItem.id === id));
      if (!item || (this.state.dataType !== this.dataType)) {
        this.$emit('updateLoading', { visible: true });
        try {
          await this.read({ dataType: this.dataType, ids: [id] });
          item = this.state.data.find((dataItem: any) => (dataItem.id === id));
          this.$emit('updateLoading', { visible: false });
        } catch (error) {
          this.$emit('showError', this.$epb.utils.decodeErrorMessage(error, this.getApiEnum()));
          this.$emit('updateLoading', { visible: false });
        }
      }
      if (!!item) {
        this.item = Object.assign({}, item);
      }
    }
    this.onItemLoad();
  }
};