import { formBuilderActionTypes } from '../action-types/formBuilder-action.types';

const initialState = {
  name: '',
  description: '',
  coverImage: '',
  formData: [{ label: 'Page 1', pos: 1, elements: [] }],
  activePage: 'Page 1',
  activeView: [],
  activeElement: '',
  updatingForm: false,
};

export default (state = initialState, action) => {
  switch (action.type) {
    case formBuilderActionTypes.ADD_NEW_PAGE:
      return { ...state, formData: action.payload };
    case formBuilderActionTypes.REFILL_FORM_DATA: {
      return {
        ...state,
        formData: action.payload.formData,
        name: action.payload.name,
      };
    }
    case formBuilderActionTypes.SET_ACTIVE_PAGE:
      return { ...state, activePage: `Page ${action.payload + 1}` };
    case formBuilderActionTypes.UPDATE_FORM_NAME:
      return { ...state, name: action.payload };
    case formBuilderActionTypes.UPDATING_FORM:
      return { ...state, updatingForm: action.payload };
    case formBuilderActionTypes.CLEAR_FORM_BUILDER:
      return {
        ...state,
        formData: [{ label: 'Page 1', pos: 1, elements: [] }],
      };
    case formBuilderActionTypes.SET_ACTIVE_ELEMENT:
      return { ...state, activeElement: action.payload };
    case formBuilderActionTypes.SWITCH_FORM_PAGE:
      return { ...state, formData: action.payload };
    case formBuilderActionTypes.EDIT_FORM_DESCRIPTION:
      return { ...state, description: action.payload };
    case formBuilderActionTypes.EDIT_FORM_NAME:
      return { ...state, name: action.payload };
    case formBuilderActionTypes.DELETE_PAGE:
      return { ...state, formData: action.payload };
    case formBuilderActionTypes.REORDER_FORM_ELEMENT:
      return { ...state, formData: action.payload };
    case formBuilderActionTypes.UPDATE_ACTIVE_VIEW: {
      const tempFormData = [...state.formData];
      const tempActiveView = [];
      tempFormData.forEach(page => {
        if (page.label === state.activePage && page.elements.length > 0) {
          page.elements.forEach(item => {
            tempActiveView.push(item);
          });
        }
      });
      return { ...state, activeView: tempActiveView };
    }
    case formBuilderActionTypes.ADD_NEW_ELEMENT:
      return { ...state, formData: action.payload };
    case formBuilderActionTypes.EDIT_ELEMENT_LABEL: {
      const tempEditLabel = [...state.formData];
      tempEditLabel.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.label = action.payload;
            }
          });
        }
      });
      return { ...state, formData: tempEditLabel };
    }
    case formBuilderActionTypes.EDIT_ELEMENT_DESCRIPTION: {
      const tempEditDescription = [...state.formData];
      tempEditDescription.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.description = action.payload;
            }
          });
        }
      });
      return { ...state, formData: tempEditDescription };
    }
    case formBuilderActionTypes.SET_MIN_MAX_CHARS: {
      const tempMinMax = [...state.formData];
      tempMinMax.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem[action.payload.label] = action.payload.value;
            }
          });
        }
      });
      return { ...state, formData: tempMinMax };
    }
    case formBuilderActionTypes.DUPLICATE_ELEMENT: {
      const tempDuplicate = [...state.formData];
      tempDuplicate.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.splice(
            action.payload.index + 1,
            0,
            action.payload.newElement
          );
        }
      });
      return { ...state, formData: tempDuplicate };
    }
    case formBuilderActionTypes.TOGGLE_ACTION: {
      const tempToggleAction = [...state.formData];
      tempToggleAction.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem[action.payload.label] = !elem[action.payload.label];
            }
          });
        }
      });
      return { ...state, formData: tempToggleAction };
    }
    case formBuilderActionTypes.DELETE_FORM_ELEMENT: {
      const tempDeleteElement = [...state.formData];
      tempDeleteElement.forEach(page => {
        if (page.label === state.activePage) {
          const afterDelete = page.elements.filter(
            item => item.unique_id !== action.payload
          );
          page.elements = afterDelete;
        }
      });
      return { ...state, formData: tempDeleteElement };
    }
    case formBuilderActionTypes.CHANGE_FORM_ELEMENT: {
      const tempChangeElement = [...state.formData];
      tempChangeElement.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.splice(
            action.payload.index,
            1,
            action.payload.newElement
          );
        }
      });
      return { ...state, formData: tempChangeElement };
    }

    case formBuilderActionTypes.UPLOAD_ELEMENT_IMAGE: {
      const tempUploadImage = [...state.formData];
      tempUploadImage.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.imageUrl = action.payload;
            }
          });
        }
      });
      return { ...state, formData: tempUploadImage };
    }

    case formBuilderActionTypes.REMOVE_ELEMENT_IMAGE: {
      const tempremoveImage = [...state.formData];
      tempremoveImage.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.imageUrl = '';
            }
          });
        }
      });
      return { ...state, formData: tempremoveImage };
    }

    case formBuilderActionTypes.UPDATE_RATING_NUMBER: {
      const tempRatingNumber = [...state.formData];
      tempRatingNumber.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.numOfRatings = parseInt(action.payload);
            }
          });
        }
      });
      return { ...state, formData: tempRatingNumber };
    }

    case formBuilderActionTypes.ADD_CHOICE_OPTION: {
      const tempAddOption = [...state.formData];
      tempAddOption.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(item => {
            if (item.unique_id === state.activeElement) {
              const tempSingleOptions = [...item.options];
              tempSingleOptions.push({ label: '', imageUrl: '' });
              item.options = tempSingleOptions;
            }
          });
        }
      });
      return { ...state, formData: tempAddOption };
    }

    case formBuilderActionTypes.DELETE_CHOICE_OPTION: {
      const tempDeleteOption = [...state.formData];
      tempDeleteOption.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.options.splice(action.payload, 1);
            }
          });
        }
      });
      return { ...state, formData: tempDeleteOption };
    }

    case formBuilderActionTypes.EDIT_OPTION_LABEL: {
      const tempEditOptionLabel = [...state.formData];
      tempEditOptionLabel.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              const editOptionLabel = elem.options;
              editOptionLabel[action.payload.index].label =
                action.payload.value;
              elem.options = editOptionLabel;
            }
          });
        }
      });
      return { ...state, formData: tempEditOptionLabel };
    }

    case formBuilderActionTypes.ADD_OPTION_IMAGE: {
      const tempAddOptionImage = [...state.formData];
      tempAddOptionImage.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.options[action.payload.index].imageUrl =
                action.payload.image;
            }
          });
        }
      });
      return { ...state, formData: tempAddOptionImage };
    }

    case formBuilderActionTypes.DELETE_OPTION_IMAGE: {
      const tempDeleteOptionImage = [...state.formData];
      tempDeleteOptionImage.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.options[action.payload].imageUrl = '';
            }
          });
        }
      });
      return { ...state, formData: tempDeleteOptionImage };
    }
    case formBuilderActionTypes.CLEAR_MIN_LENGTH: {
      const tempClearMinLength = [...state.formData];
      tempClearMinLength.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.minLength = '';
            }
          });
        }
      });
      return { ...state, formData: tempClearMinLength };
    }
    case formBuilderActionTypes.ADD_LOGIC: {
      const tempAddLogic = [...state.formData];
      tempAddLogic.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.logics.push({
                condition: '',
                value: '',
                action: '',
                targets: [],
              });
            }
          });
        }
      });
      return { ...state, formData: tempAddLogic };
    }

    case formBuilderActionTypes.DELETE_LOGIC: {
      const tempDeleteLogic = [...state.formData];
      tempDeleteLogic.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.logics.splice(action.payload, 1);
            }
          });
        }
      });
      return { ...state, formData: tempDeleteLogic };
    }

    case formBuilderActionTypes.CLEAR_LOGIC: {
      const tempClearLogic = [...state.formData];
      tempClearLogic.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.logics = [];
            }
          });
        }
      });
      return { ...state, formData: tempClearLogic };
    }

    case formBuilderActionTypes.UPDATE_LOGIC_PROPERTY: {
      const tempLogicProps = [...state.formData];
      tempLogicProps.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.logics[action.payload.index][action.payload.property] =
                action.payload.value;
            }
          });
        }
      });
      return { ...state, formData: tempLogicProps };
    }

    case formBuilderActionTypes.UPDATE_LOGIC_TARGET: {
      const tempUpdateLogicTarget = [...state.formData];
      tempUpdateLogicTarget.forEach(page => {
        if (page.label === state.activePage) {
          page.elements.forEach(elem => {
            if (elem.unique_id === state.activeElement) {
              elem.logics[action.payload.index].targets.push(
                action.payload.value
              );
            }
          });
        }
      });
      return { ...state, formData: tempUpdateLogicTarget };
    }

    default:
      return state;
  }
};
