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

import { ENVIRONMENT_INTERNAL } from '../../../Edit/constants';
import { DESIGN_STANDARD, FORM_REDUX_FIELD_NAME, SIZE_MEDIUM, TAB_GENERAL } from '../../constants';
import { APPEARANCE_MODE_LIGHT } from '@/mui/constants';

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

const formSlice = createFormSlice(FORM_REDUX_FIELD_NAME, validationScheme);

export const { validateFields, validateSingleField } = formSlice;

const initialState = {
  watchTitle: '',
  watchEnvironment: ENVIRONMENT_INTERNAL,
  watchFolderName: '',
  watchHub: null,
  /** todo:
   should be received from the PCN watch by endpoint has an issue
  that's why it is from taken from component React by useEffect
  but should be from src/modules/editorial/RightSideBar/TabWatch/ChannelEdit/redux/epics/updateDefaultPropFromWatch.js
   */
  watchChannels: [],
  id: null,
  appearance: APPEARANCE_MODE_LIGHT,
  title: '',
  description: '',

  size: SIZE_MEDIUM, // STANDARD, LARGE
  design: DESIGN_STANDARD, // STANDARD, BACKGROUND, INLINE

  bg: null,

  logo: null,
  bgLogo: null,
  titleColor: null,
  descColor: null,

  vidTitleColor: null,
  vidInfoColor: null,

  cTitleColor: null,
  cVidTitleColor: null,
  cVidInfoColor: null,

  cTitleSize: null,
  cVidTitleSize: null,
  cVidInfoSize: null,

  isLoading: false,
  formChanged: false,

  MRSSForExport: false,
  MRSSAliasDomain: '',
  MRSSLinkUrl: '',

  // sponsored content
  includeSponsoredContent: false,
  frequency: 3,
  supplyTag: null,
  supplyTagOptions: null,

  activeTabId: TAB_GENERAL,

  ...formSlice.state,
};

export const slice = createSlice({
  name: '@@WATCH/CHANNEL_EDIT',
  initialState,
  reducers: {
    clearAction: () => ({ ...initialState, watchChannels: [] }),
    updateStoreByPropAction: (state, action) => {
      Object.keys(action.payload).forEach((key) => {
        state[key] = action.payload[key];
      });
    },
    createChannelAction: (state) => state,
    getChannelByIdAction: (state) => state,
    setDefaultPropsFromWatchAction: (state) => state,
    updateChannelAction: (state) => state,
    getSupplyTagOptionsAction: (state) => state,

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

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

export const {
  clearAction,
  createChannelAction,
  getChannelByIdAction,
  setActiveTabIdAction,
  setScrollToFieldNameAction,
  setDefaultPropsFromWatchAction,
  setErrorByPropAction,
  removeErrorByPropAction,
  updateChannelAction,
  updateStoreByPropAction,
  getSupplyTagOptionsAction,
} = slice.actions;

export default slice.reducer;
