import { createSlice } from '@reduxjs/toolkit';

import { TAB_FORM_DETAILS, TEMPLATE_ACCOUNT_ALL, TEMPLATE_CATEGORY_CONTENT_FEEDBACK } from '../../../constants';
import { ALIGN_ITEMS_RIGHT, FONTS_OPTIONS } from '../../../editor/constants';
import { FORM_REDUX_FIELD_NAME } from '../../constants';

import { validationScheme } from '../../helpers/validationScheme';
import createFormSlice from '@/modules/@common/Form/redux/slices';
import { createDefaultField } from '@/modules/forms/helpers/createDynamicField';

const formSlice = createFormSlice(FORM_REDUX_FIELD_NAME, validationScheme);

export const { validateFields, validateSingleField } = formSlice;

const initialState = {
  id: null,
  name: '',
  category: TEMPLATE_CATEGORY_CONTENT_FEEDBACK,
  categoryOptions: [],
  account: TEMPLATE_ACCOUNT_ALL, // { value, label }
  image: [null, null, null], // [logo, banner, thumb]
  title: '',
  description: '',
  dynamicFields: [
    createDefaultField({
      name: 'defaultDynamicFieldName',
    }),
  ],
  submitButton: {
    title: 'Submit',
  },
  privacyPolicy: {
    title: 'Privacy Policy',
    src: '',
  },
  termsConditions: {
    isActive: true,
    title: 'Terms & Conditions',
    src: '',
  },
  skipButton: {
    isActive: true,
    title: 'Skip',
  },
  style: {
    bgColor: '#fff',
    alignItems: ALIGN_ITEMS_RIGHT,
    fontFamily: FONTS_OPTIONS[0].value,
    fontSize: 14,
    fontColor: '#666',
    submitButtonBgColor: '#2869d1',
    submitButtonFontColor: '#fff',
  },
  medataFormId: null, // need for API which update metadata
  autocomplete: {
    textOptions: null,
  },

  activeTabId: TAB_FORM_DETAILS,

  ...formSlice.state,
};

export const slice = createSlice({
  name: '@@TEMPLATE/EDITOR',
  initialState,
  reducers: {
    getAccountOptionsAction: (state) => state,
    getCategoryOptionsAction: (state) => state,
    createTemplateAction: (state) => state,
    uploadLogoAction: (state) => state,
    uploadBannerAction: (state) => state,
    getTemplateByIdAction: (state) => state,
    updateTemplateAction: (state) => state,
    duplicateTemplateAction: (state) => state,
    saveProcessAction: (state) => state,
    setFieldAction: (state, action) => ({
      ...state,
      ...action.payload,
    }),
    setInitialAction: () => ({
      ...initialState,
    }),
    setActiveTabIdAction: (state, action) => {
      state.activeTabId = action.payload;
    },

    setScrollToFieldNameAction: formSlice.actions.setScrollToFieldAction,
    setErrorByPropAction: formSlice.actions.updateValidationSchemeAction,
    removeErrorByPropAction: formSlice.actions.removeErrorByFieldNameAction,
  },
});

export const {
  createTemplateAction,
  duplicateTemplateAction,
  getAccountOptionsAction,
  getCategoryOptionsAction,
  getTemplateByIdAction,
  saveProcessAction,
  setFieldAction,
  setInitialAction,
  updateTemplateAction,
  uploadBannerAction,
  uploadLogoAction,
  setActiveTabIdAction,

  setScrollToFieldNameAction,
  setErrorByPropAction,
  removeErrorByPropAction,
} = slice.actions;

export default slice.reducer;
