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

import { DESTINATION_REDUX_FIELD_NAME, SETTINGS_STATUS_ENABLED, TAB_GENERAL } from '../../constants';

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

const formSlice = createFormSlice(DESTINATION_REDUX_FIELD_NAME, validationScheme);

export const { validateFields, validateSingleField } = formSlice;

const initialState = {
  type: '',
  id: 0,
  publisherId: 0,
  publisher: null,
  name: '',
  status: SETTINGS_STATUS_ENABLED,
  visibility: null,
  viewabilityConfig: [],
  channels: [],
  defaultChannel: '',
  playlists: [],
  defaultPlaylist: '',
  defaultChannelName: '',
  defaultPlaylistName: '',
  userName: '',
  pageAccessToken: '',

  title: true,
  category: true,
  thumbnail: true,
  description: true,
  language: false,
  manualTags: true,
  autoTags: false,
  closedCaptions: false,

  expiryDate: '',
  accessToken: '',
  refreshToken: '',
  isLoading: false,

  activeTabId: TAB_GENERAL,
  ...formSlice.state,
};

export const slice = createSlice({
  name: '@@DESTINATION/EDIT',
  initialState,

  reducers: {
    exchangeGoogleAuthCodeAction: (state) => state,
    exchangeFacebookAuthCodeAction: (state) => state,
    createDestinationAction: (state) => state,
    getDestinationByIdAction: (state) => state,
    updateDestinationAction: (state) => state,
    getViewabilityConfigAction: (state) => state,
    setDestinationDataAction: (state, action) => {
      Object.keys(action.payload).forEach((key) => {
        state[key] = action.payload[key];
      });

      state.publisher = {
        id: action.payload.publisherId,
        name: action.payload.publisher.name,
      };
    },
    clearFormAction: () => ({
      ...initialState,
    }),
    updateDestinationFormAction: (state, action) => {
      Object.keys(action.payload).forEach((key) => {
        state[key] = action.payload[key];
      });
    },
    setViewabilityConfigAction: (state, action) => {
      state.viewabilityConfig = [...action.payload];
    },
    setErrorAction: (state, action) => {
      state.errors = {
        ...state.errors,
        ...action.payload,
      };
    },
    setActiveTabIdAction: (state, action) => {
      state.activeTabId = action.payload;
    },

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

export const {
  clearFormAction,
  createDestinationAction,
  exchangeFacebookAuthCodeAction,
  exchangeGoogleAuthCodeAction,
  getDestinationByIdAction,
  getViewabilityConfigAction,
  setDestinationDataAction,
  setViewabilityConfigAction,
  updateDestinationAction,
  updateDestinationFormAction,

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

export default slice.reducer;
