import axios from 'axios';
import { nanoid } from 'nanoid';
import { formActionTypes } from '../../action-types/form-action.types';
import _ from 'lodash';

const {
  formBuilderActionTypes,
} = require('../../action-types/formBuilder-action.types');
/**
 * Action for adding new form page
 */

export const addNewPage = data => dispatch => {
  dispatch({
    type: formBuilderActionTypes.ADD_NEW_PAGE,
    payload: data,
  });
};
export const editFormName = name => dispatch => {
  dispatch({
    type: formBuilderActionTypes.EDIT_FORM_NAME,
    payload: name,
  });
};
export const editElementLabel = label => dispatch => {
  dispatch({
    type: formBuilderActionTypes.EDIT_ELEMENT_LABEL,
    payload: label,
  });
};
export const editElementDescription = description => dispatch => {
  dispatch({
    type: formBuilderActionTypes.EDIT_ELEMENT_DESCRIPTION,
    payload: description,
  });
};
export const editFormDescription = description => dispatch => {
  dispatch({
    type: formBuilderActionTypes.EDIT_FORM_DESCRIPTION,
    payload: description,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
/**
 * @description: delete a target page on form builder
 * @param {*} id
 */

export const deletePage = data => dispatch => {
  dispatch({
    type: formBuilderActionTypes.DELETE_PAGE,
    payload: data,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
/**
 * @description: Make a page an active page
 * @param {*} id
 */

export const setActivePage = index => dispatch => {
  dispatch({
    type: formBuilderActionTypes.SET_ACTIVE_PAGE,
    payload: index,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const removeElementImage = () => dispatch => {
  dispatch({
    type: formBuilderActionTypes.REMOVE_ELEMENT_IMAGE,
  });
};
/**
 * @description: swap form pages
 * @param {*}
 */

export const switchFormPage = data => dispatch => {
  dispatch({
    type: formBuilderActionTypes.SWITCH_FORM_PAGE,
    payload: data,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
/**
 * @description: set active view of form elements
 * @param {*}
 */

export const updateActiveView = () => dispatch => {
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const refillFormData = id => async dispatch => {
  const url = `/forms/${id}`;
  const formDetails = {};

  try {
    const refillData = await axios.get(url);
    const { data, success } = refillData.data;

    if (success) {
      formDetails.name = data.name;
      formDetails.formData = data.formData;
    }

    if (data.description) {
      dispatch({
        type: formBuilderActionTypes.EDIT_FORM_DESCRIPTION,
        payload: data.description,
      });
    }

    if (data.coverImage && data.coverImage.length > 0) {
      dispatch({
        type: formActionTypes.SET_COVER_IMAGE,
        payload: data.coverImage,
      });
    } else {
      dispatch({
        type: formActionTypes.SET_COVER_IMAGE,
        payload: '',
      });
    }

    dispatch({
      type: formBuilderActionTypes.REFILL_FORM_DATA,
      payload: formDetails,
    });
    dispatch({
      type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
    });
  } catch (error) {
    return error;
  }
};
/**
 * @description: set active view of form elements
 * @param {*}
 */

export const setActiveElement = id => dispatch => {
  dispatch({
    type: formBuilderActionTypes.SET_ACTIVE_ELEMENT,
    payload: id,
  });
};
/**
 * @description: add new input element
 * @param {*} type
 * @param {*} id
 * @param {*} formData
 * @param {*} activePage
 * @param {*} label
 */

export const addShortTextElement = (
  type,
  id,
  formData,
  activePage,
  label
) => dispatch => {
  const tempFormData = [...formData];
  tempFormData.forEach(page => {
    if (page.label === activePage) {
      page.elements.push({
        type,
        unique_id: id,
        label: label,
        enabled: true,
        hidden: false,
        placeholder: '',
        description: '',
        maxLength: '',
        minLength: '',
        isMandatory: false,
      });
    }
  });
  dispatch({
    type: formBuilderActionTypes.ADD_NEW_ELEMENT,
    payload: tempFormData,
  });
  dispatch({
    type: formBuilderActionTypes.SET_ACTIVE_ELEMENT,
    payload: id,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
}; // Add the agreement component

export const addAgreement = (
  type,
  id,
  formData,
  activePage,
  label
) => dispatch => {
  const tempFormData = [...formData];
  tempFormData.forEach(page => {
    if (page.label === activePage) {
      page.elements.push({
        type,
        unique_id: id,
        label: label,
        enabled: true,
        hidden: false,
        description: '',
        isMandatory: false,
      });
    }
  });
  dispatch({
    type: formBuilderActionTypes.ADD_NEW_ELEMENT,
    payload: tempFormData,
  });
  dispatch({
    type: formBuilderActionTypes.SET_ACTIVE_ELEMENT,
    payload: id,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
}; // Add the agreement component

export const addChoiceQuestion = (
  type,
  id,
  formData,
  activePage,
  label
) => dispatch => {
  const tempFormData = [...formData];
  tempFormData.forEach(page => {
    if (page.label === activePage) {
      page.elements.push({
        type,
        unique_id: id,
        label: label,
        enabled: true,
        hidden: false,
        description: '',
        isMandatory: false,
        withPhoto: false,
        options: [],
        other: true,
        logics: [],
      });
    }
  });
  dispatch({
    type: formBuilderActionTypes.ADD_NEW_ELEMENT,
    payload: tempFormData,
  });
  dispatch({
    type: formBuilderActionTypes.SET_ACTIVE_ELEMENT,
    payload: id,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const duplicateChoiceQUestion = (
  type,
  id,
  formData,
  activePage,
  label,
  elementDetails,
  index
) => dispatch => {
  const tempFormData = [...formData];

  const clonedDetails = _.cloneDeep(elementDetails);

  tempFormData.forEach(page => {
    if (page.label === activePage) {
      page.elements.splice(index, 0, {
        type,
        unique_id: id,
        label: clonedDetails.label,
        enabled: clonedDetails.enabled,
        hidden: clonedDetails.hidden,
        description: clonedDetails.description,
        isMandatory: clonedDetails.isMandatory,
        withPhoto: clonedDetails.withPhoto,
        options: [...clonedDetails.options],
        other: clonedDetails.other,
        logics: [...clonedDetails.logics],
      });
    }
  });
  dispatch({
    type: formBuilderActionTypes.ADD_NEW_ELEMENT,
    payload: tempFormData,
  });
  dispatch({
    type: formBuilderActionTypes.SET_ACTIVE_ELEMENT,
    payload: id,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
}; // Add rating element to ratings

export const addRatingElement = (
  type,
  id,
  formData,
  activePage,
  label
) => dispatch => {
  const tempFormData = [...formData];
  tempFormData.forEach(page => {
    if (page.label === activePage) {
      page.elements.push({
        type,
        unique_id: id,
        label: label,
        enabled: true,
        hidden: false,
        description: '',
        isMandatory: false,
        numOfRatings: 4,
      });
    }
  });
  dispatch({
    type: formBuilderActionTypes.ADD_NEW_ELEMENT,
    payload: tempFormData,
  });
  dispatch({
    type: formBuilderActionTypes.SET_ACTIVE_ELEMENT,
    payload: id,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
}; // Add rating element to ratings

export const addFileUploadElement = (
  type,
  id,
  formData,
  activePage,
  label
) => dispatch => {
  const tempFormData = [...formData];
  tempFormData.forEach(page => {
    if (page.label === activePage) {
      page.elements.push({
        type,
        unique_id: id,
        label: label,
        enabled: true,
        hidden: false,
        description: '',
        isMandatory: false,
      });
    }
  });
  dispatch({
    type: formBuilderActionTypes.ADD_NEW_ELEMENT,
    payload: tempFormData,
  });
  dispatch({
    type: formBuilderActionTypes.SET_ACTIVE_ELEMENT,
    payload: id,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
}; // Add  location element

export const addLocationElement = (
  type,
  id,
  formData,
  activePage,
  label
) => dispatch => {
  const tempFormData = [...formData];
  tempFormData.forEach(page => {
    if (page.label === activePage) {
      page.elements.push({
        type,
        unique_id: id,
        label: label,
        enabled: true,
        hidden: false,
        description: '',
        isMandatory: false,
      });
    }
  });
  dispatch({
    type: formBuilderActionTypes.ADD_NEW_ELEMENT,
    payload: tempFormData,
  });
  dispatch({
    type: formBuilderActionTypes.SET_ACTIVE_ELEMENT,
    payload: id,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
}; // Add  location element

export const reoderCurrentView = (
  formData,
  updatedView,
  activePage
) => dispatch => {
  const tempFormData = [...formData];
  tempFormData.forEach(page => {
    if (page.label === activePage) {
      page.elements = updatedView;
    }
  });
  dispatch({
    type: formBuilderActionTypes.REORDER_FORM_ELEMENT,
    payload: tempFormData,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const setMinMaxChars = (label, value) => dispatch => {
  dispatch({
    type: formBuilderActionTypes.SET_MIN_MAX_CHARS,
    payload: {
      label,
      value,
    },
  });
};
export const toggleAction = label => dispatch => {
  dispatch({
    type: formBuilderActionTypes.TOGGLE_ACTION,
    payload: {
      label,
    },
  });
};
export const duplicateElement = (element, index) => dispatch => {
  const newId = nanoid();
  const newElement = { ...element, unique_id: newId };
  dispatch({
    type: formBuilderActionTypes.DUPLICATE_ELEMENT,
    payload: {
      newElement,
      index,
    },
  });
  dispatch({
    type: formBuilderActionTypes.SET_ACTIVE_ELEMENT,
    payload: newId,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const deleteFormElement = id => dispatch => {
  dispatch({
    type: formBuilderActionTypes.DELETE_FORM_ELEMENT,
    payload: id,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const changeFormElement = (type, index) => dispatch => {
  const id = nanoid();
  let newElement = {};

  if (
    type === 'shortText' ||
    type === 'longText' ||
    type === 'phoneNumber' ||
    type === 'email' ||
    type === 'links' ||
    type === 'date' ||
    type === 'time' ||
    type === 'number'
  ) {
    newElement = {
      type,
      unique_id: id,
      label: 'label',
      enabled: true,
      hidden: false,
      placeholder: '',
      description: '',
      maxLength: '',
      minLength: '',
      isMandatory: false,
    };
  } else if (type === 'agreement') {
    newElement = {
      type,
      unique_id: id,
      label: 'label',
      enabled: true,
      hidden: false,
      description: '',
      isMandatory: false,
    };
  } else if (
    type === 'multiChoice' ||
    type === 'singleChoice' ||
    type === 'dropDown'
  ) {
    newElement = {
      type,
      unique_id: id,
      label: 'label',
      enabled: true,
      hidden: false,
      description: '',
      isMandatory: false,
      withPhoto: false,
      options: [],
      other: true,
      logics: [],
    };
  } else if (type === 'rating') {
    newElement = {
      type,
      unique_id: id,
      label: 'label',
      enabled: true,
      hidden: false,
      description: '',
      isMandatory: false,
      ratings: [
        {
          label: 'label 1',
        },
        {
          label: 'label 2',
        },
        {
          label: 'label 3',
        },
        {
          label: 'label 4',
        },
      ],
      numOfRatings: 4,
    };
  } else if (
    type === 'fileUpload' ||
    type === 'imageCapture' ||
    type === 'locationMap' ||
    type === 'areaMap' ||
    type === 'address'
  ) {
    newElement = {
      type,
      unique_id: id,
      label: 'label',
      enabled: true,
      hidden: false,
      description: '',
      isMandatory: false,
    };
  }

  dispatch({
    type: formBuilderActionTypes.CHANGE_FORM_ELEMENT,
    payload: {
      newElement,
      index,
    },
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const uploadElementImage = url => dispatch => {
  dispatch({
    type: formBuilderActionTypes.UPLOAD_ELEMENT_IMAGE,
    payload: url,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const updateRatingNumber = value => dispatch => {
  dispatch({
    type: formBuilderActionTypes.UPDATE_RATING_NUMBER,
    payload: value,
  });
};
export const getUploadUrl = photo => async () => {
  const data = new FormData();
  data.append('files', photo);
  data.append('folder', 'admin-profile');
  const config = {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  };
  const uploadData = await axios.post('/files', data, config);
  return uploadData;
};
export const addChoiceOption = () => dispatch => {
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
  dispatch({
    type: formBuilderActionTypes.ADD_CHOICE_OPTION,
  });
};
export const deleteChoiceOption = index => dispatch => {
  dispatch({
    type: formBuilderActionTypes.DELETE_CHOICE_OPTION,
    payload: index,
  });
};
export const editOptionLabel = (value, index) => dispatch => {
  dispatch({
    type: formBuilderActionTypes.EDIT_OPTION_LABEL,
    payload: {
      index,
      value,
    },
  });
};
export const addOptionImage = (image, index) => dispatch => {
  dispatch({
    type: formBuilderActionTypes.ADD_OPTION_IMAGE,
    payload: {
      image,
      index,
    },
  });
};
export const deleteOptionImage = index => dispatch => {
  dispatch({
    type: formBuilderActionTypes.DELETE_OPTION_IMAGE,
    payload: index,
  });
};
export const addNewLogic = () => dispatch => {
  dispatch({
    type: formBuilderActionTypes.ADD_LOGIC,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const clearLogic = () => dispatch => {
  dispatch({
    type: formBuilderActionTypes.CLEAR_LOGIC,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const deleteLogic = index => dispatch => {
  dispatch({
    type: formBuilderActionTypes.DELETE_LOGIC,
    payload: index,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const updateLogicProperty = (index, value, property) => dispatch => {
  dispatch({
    type: formBuilderActionTypes.UPDATE_LOGIC_PROPERTY,
    payload: {
      index,
      value,
      property,
    },
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const updateLogicTarget = (index, value, property) => dispatch => {
  dispatch({
    type: formBuilderActionTypes.UPDATE_LOGIC_TARGET,
    payload: {
      index,
      value,
      property,
    },
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const clearFormBuilder = () => dispatch => {
  dispatch({
    type: formBuilderActionTypes.CLEAR_FORM_BUILDER,
  });
  dispatch({
    type: formBuilderActionTypes.UPDATE_ACTIVE_VIEW,
  });
};
export const clearMinimumCharacters = () => dispatch => {
  dispatch({
    type: formBuilderActionTypes.CLEAR_MIN_LENGTH,
  });
};
