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

import { TAB_FORM_DETAILS } from '../../../constants';
import {
  ALIGN_ITEMS_RIGHT,
  FONTS_OPTIONS,
  FORM_REDUX_FIELD_NAME,
  PERIOD_DAILY,
  PLAYER_SIZE_LARGE,
  PLAYER_SIZE_MEDIUM,
  PLAYER_SIZE_SMALL,
  PLAYER_SIZE_X_SMALL,
  STATUS_DISABLED,
  TARGET_PLACEMENT_TYPE_WATCH,
  TRIGGER_TIMESTAMP,
} 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,
  status: STATUS_DISABLED,
  name: '',
  site: null, // { value, label }
  scheduleReport: {
    email: '',
    period: PERIOD_DAILY,
  },
  enableInstantDelivery: false,
  image: [null, null],
  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',
  },
  trigger: {
    triggerAction: TRIGGER_TIMESTAMP,
    triggerTime: '00:00:00',
    triggerApiValue: '',
    activateLimitsPeriod: false,
    frequencyLimitsMaxViewPerUser: 5,
    frequencyLimitsPeriod: PERIOD_DAILY,
    frequencyLimitsDisplayOnlyOnceSubmitted: false,
    frequencyLimitsNotShowWhenOnceDisplayed: false,
    targetPlacementType: TARGET_PLACEMENT_TYPE_WATCH,

    watch: null,
    watchChannel: null,
    playerName: null,
    playerSize: [PLAYER_SIZE_X_SMALL, PLAYER_SIZE_SMALL, PLAYER_SIZE_MEDIUM, PLAYER_SIZE_LARGE],
    domains: [],
    devices: [],
    geographies: [],

    video: null,
    categories: [],
    peoples: [],
    brands: [],
    keywords: [],
    labels: [],
    brandSafeties: [],
  },
  medataFormId: null, // need for API which update metadata
  autocomplete: {
    textOptions: null, // used for brands, peoples, brands_safety, keywords
    watchOptions: null,
    watchChannelOptions: null,
  },
  isFormDownloadInProgress: false,

  shouldShowDownloadTryRequestOverConfirm: false,
  formDownloadTryRequestCounter: 1,

  activeTabId: TAB_FORM_DETAILS,

  ...formSlice.state,
};

export const slice = createSlice({
  name: '@@FORM/EDITOR',
  initialState,
  reducers: {
    getBrandSafetyOptionsAction: (state) => state,
    getKeywordsOptionsAction: (state) => state,
    getBrandsOptionsAction: (state) => state,
    getPeopleOptionsAction: (state) => state,
    getLabelOptionsAction: (state) => state,
    getDomainOptionsAction: (state) => state,
    getGeoOptionsAction: (state) => state,
    getSiteOptionsAction: (state) => state,
    getWatchOptionsAction: (state) => state,
    getVideoOptionsAction: (state) => state,
    getPlayerOptionsAction: (state) => state,
    createFormAction: (state) => state,
    uploadLogoAction: (state) => state,
    uploadBannerAction: (state) => state,
    getFormByIdAction: (state) => state,
    updateFormAction: (state) => state,
    duplicateFormAction: (state) => state,
    downloadFormDataAction: (state) => state,
    sendTestEmailAction: (state) => state,
    sendFormReportToUserEmailAction: (state) => state,
    getTemplateByIdAction: (state) => state,
    setFieldAction: (state, action) => {
      Object.entries(action.payload).forEach(([key, value]) => {
        state[key] = value;
      });
    },
    setInitialAction: () => ({
      ...initialState,
    }),

    setActiveTabIdAction: (state, action) => {
      state.activeTabId = action.payload;
    },

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

export const {
  createFormAction,
  downloadFormDataAction,
  duplicateFormAction,
  getBrandSafetyOptionsAction,
  getBrandsOptionsAction,
  getDomainOptionsAction,
  getFormByIdAction,
  getGeoOptionsAction,
  getKeywordsOptionsAction,
  getLabelOptionsAction,
  getPeopleOptionsAction,
  getPlayerOptionsAction,
  getSiteOptionsAction,
  getTemplateByIdAction,
  getVideoOptionsAction,
  getWatchOptionsAction,
  sendFormReportToUserEmailAction,
  sendTestEmailAction,
  setFieldAction,
  setInitialAction,
  updateFormAction,
  uploadBannerAction,
  uploadLogoAction,
  setActiveTabIdAction,

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

export default slice.reducer;
