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

import { STATUSES_ACTIVE } from '../../../List/constants';
import {
  DEVICE_DESKTOP,
  DEVICE_MOBILE,
  PLAYER_LARGE,
  PLAYER_MEDIUM,
  PLAYER_SMALL,
  REDUX_FIELD_NAME,
  TAB_GENERAL,
} from '../../constants';

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

const formSlice = createFormSlice(REDUX_FIELD_NAME, validationScheme);

export const { validateFields, validateSingleField } = formSlice;

const initialState = {
  id: null,
  // general tab
  hub: null,
  hubOptions: null,
  xrayCampaign: null,
  xrayCampaignOptions: null,
  name: '',
  status: STATUSES_ACTIVE,
  priority: 5,
  xrayCreative1: null,
  xrayCreative2: null,
  xrayCreative3: null,
  xrayCreativeOptions: null,

  // delivery tab
  startTime: null,
  endTime: null,
  timezone: { id: 1, name: 'UTC' },
  timezoneOptions: null,
  rate: null,
  impressionsBudget: null,
  spendBudget: null,

  // targeting tab
  watch: null,
  watchOptions: null,
  watchChannel: null,
  watchChannelOptions: null,
  player: null,
  playerOptions: [],
  domains: [],
  domainsOptions: null,
  devices: [DEVICE_DESKTOP, DEVICE_MOBILE],
  geography: [],
  geographyOptions: null,
  inview: true,
  notInview: true,
  playerSizes: [PLAYER_SMALL, PLAYER_MEDIUM, PLAYER_LARGE],
  video: null,
  videoOptions: null,
  videoFromTimestamp: timestampToString(0),
  videoToTimestamp: timestampToString(0),
  iabCategories: [],
  people: [],
  peopleOptions: null,
  brands: [],
  brandsOptions: null,
  keywords: [],
  keywordsOptions: null,
  labels: [],
  labelsOptions: null,
  brandSafety: [],
  brandSafetyOptions: null,

  activeTabId: TAB_GENERAL,

  ...formSlice.state,
};

export const slice = createSlice({
  name: '@@XRAY_LINEITEMS/EDITOR',
  initialState,
  reducers: {
    setAction: (state, action) => {
      Object.entries(action.payload).forEach(([key, value]) => {
        state[key] = value;
      });
    },
    setInitialAction: () => ({
      ...initialState,
    }),
    getItemAction: (state) => state,
    getHubOptionsAction: (state) => state,
    getTimezoneOptionsAction: (state) => state,
    getXRayCampaignOptionsAction: (state) => state,
    getXRayCreativeOptionsAction: (state) => state,
    getWatchOptionsAction: (state) => state,
    getDomainOptionsAction: (state) => state,
    getGeographyOptionsAction: (state) => state,
    getPlayerOptionsAction: (state) => state,
    getVideoOptionsAction: (state) => state,
    getPeopleOptionsAction: (state) => state,
    getBrandsOptionsAction: (state) => state,
    getKeywordsOptionsAction: (state) => state,
    getLabelsOptionsAction: (state) => state,
    getBrandSafetyOptionsAction: (state) => state,
    createItemAction: (state) => state,
    updateItemAction: (state) => state,

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

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

export const {
  setAction,
  setInitialAction,
  getItemAction,
  getHubOptionsAction,
  getTimezoneOptionsAction,
  getXRayCampaignOptionsAction,
  getXRayCreativeOptionsAction,
  getWatchOptionsAction,
  getDomainOptionsAction,
  getGeographyOptionsAction,
  getPlayerOptionsAction,
  getVideoOptionsAction,
  getPeopleOptionsAction,
  getBrandsOptionsAction,
  getKeywordsOptionsAction,
  getLabelsOptionsAction,
  getBrandSafetyOptionsAction,
  createItemAction,
  updateItemAction,

  setActiveTabIdAction,

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

export default slice.reducer;
