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

import {
  DEEP_SEARCH_REDIRECT_PLAYLIST,
  DEFAULT_LANGUAGES_LIST,
  DEFAULT_WATCH_LANGUAGE_VALUE,
  ENUM_LIGHT,
  ENVIRONMENT_INTERNAL,
  FORM_REDUX_FIELD_NAME,
  GEN_AI_DEFAULT_VIDEO_COUNT,
  LIKES,
  PAGE_MODE_STANDARD,
  SHARES,
  TAB_BASIC_DETAILS,
  VIEWS,
} from '../../constants';
import { DEEP_SEARCH_TAGS_LIST } from '../../constants/label';
import { CHIPS_ENABLED_PRESET, LIGHT_PRESET, PRESETS } from '../../constants/presets';
import { ORDER_OF_TABS } from '@/modules/editorial/RightSideBar/TabWatch/Edit/constants/orderOfTabs';

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

const defaultWatchColorPreset = {
  appearance: ENUM_LIGHT,
  font: 'Roboto',
  fontSize: null,
  color: LIGHT_PRESET.color,
  bg: LIGHT_PRESET.bg,
  dockMobile: true,
  offsetTop: '0',
  offsetBottom: '10',
};

const defaultChannelColorPreset = {
  cTitleSize: null,
  cTitleColor: LIGHT_PRESET.cTitleColor,
  cDescSize: null,
  cDescColor: LIGHT_PRESET.cDescColor,
  cVidTitleSize: null,
  cVidTitleColor: LIGHT_PRESET.cVidTitleColor,
  cInfoColor: LIGHT_PRESET.cInfoColor,
};

const defaultSearchColorPreset = {
  sTitleSize: null,
  sTitleColor: LIGHT_PRESET.sTitleColor,
  sVidTitleSize: null,
  sVidTitleColor: LIGHT_PRESET.sVidTitleColor,
  sVidInfoSize: null,
  sVidInfoColor: LIGHT_PRESET.sVidInfoColor,
};

const formSlice = createFormSlice(FORM_REDUX_FIELD_NAME, validationScheme);

export const { validateFields, validateSingleField } = formSlice;

const initialState = {
  // general
  id: null,
  hub: null, // { value, label }
  hubOptions: null,
  title: '',
  description: '',
  status: 1,
  environment: ENVIRONMENT_INTERNAL,
  source: [], // [{ value, label}]
  sourceOptions: null,
  sourceSearchText: '',
  domain: null, // [{ value, label}]
  domainOptions: null,
  // general - features
  search: true,
  deepSearch: true,
  genAI: false,
  comments: false,
  autoplay: true,
  autoplayMobile: true,
  autoplayNext: true,
  sound: true,
  soundMobile: true,
  seo: false,
  sitemap: '',
  download: false,
  emailShare: true,
  socialShare: true,
  shareService: true,
  highlights: false,
  transcriptDownload: false,
  slides: false,
  chapters: true,

  // lookAndFeel
  ...defaultWatchColorPreset,
  ...defaultChannelColorPreset,
  engagement: [VIEWS, LIKES, SHARES],
  layout: PAGE_MODE_STANDARD,
  popupSize: 80,

  // searchLookAndFeel
  ...defaultSearchColorPreset,
  searchPlaceholder: 'Search within Video - Powered by AnyClip',
  searchLabel: 'Search within Video',

  // chips
  ...CHIPS_ENABLED_PRESET,

  // advanced
  language: DEFAULT_WATCH_LANGUAGE_VALUE,
  languages: DEFAULT_LANGUAGES_LIST,
  tabOrder: ORDER_OF_TABS,
  dsTags: DEEP_SEARCH_TAGS_LIST.map((tag) => tag.value),
  dsRedirect: DEEP_SEARCH_REDIRECT_PLAYLIST,
  dblClickFlow: true,
  rtl: false,
  ad: false,
  adHubId: '',
  adWidgetId: '',
  videoPreview: true,
  delayPreview: 750,
  css: '',
  configuration: null,

  // custom
  player: null,
  inlinePlayer: null,
  verticalPlayer: null,
  inlineVerticalPlayer: null,
  myWatch: false,
  widgetOrigin: '',
  js: '',
  backMobile: false,
  genAICount: GEN_AI_DEFAULT_VIDEO_COUNT,
  genAICountDraft: '',

  // custom watch fields
  accountId: null,
  accountFeatures: {}, // { [featureName]: bool }
  formChanged: false,
  isLoading: false,
  folderName: '',

  activeTabId: TAB_BASIC_DETAILS,

  ...formSlice.state,
};

export const slice = createSlice({
  name: '@@WATCH/WATCH_EDIT',
  initialState,
  reducers: {
    getWatchByIdAction: (state) => state,
    createWatchAction: (state) => state,
    updateWatchAction: (state) => state,
    getHubOptionsAction: (state) => state,
    getSourceOptionsAction: (state) => state,
    getDomainOptionsAction: (state) => state,
    getAccountFeatures: (state) => state,
    updateStoreByPropAction: (state, action) => {
      Object.keys(action.payload).forEach((key) => {
        state[key] = action.payload[key];
      });
    },
    clearAction: () => ({ ...initialState }),
    setAppearanceModelAction: (state, action) => {
      const preset = PRESETS[action.payload] ?? {};
      Object.keys(preset).forEach((key) => {
        state[key] = preset[key];
      });
    },
    setLookAndFeelToDefaultAction: (state) => {
      Object.keys(defaultWatchColorPreset).forEach((key) => {
        state[key] = defaultWatchColorPreset[key];
      });
      Object.keys(defaultChannelColorPreset).forEach((key) => {
        state[key] = defaultChannelColorPreset[key];
      });
      Object.keys(defaultSearchColorPreset).forEach((key) => {
        state[key] = defaultSearchColorPreset[key];
      });
    },
    setActiveTabIdAction: (state, action) => {
      state.activeTabId = action.payload;
    },

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

export const {
  clearAction,
  createWatchAction,
  getDomainOptionsAction,
  getAccountFeatures,
  getHubOptionsAction,
  getSourceOptionsAction,
  getWatchByIdAction,
  setActiveTabIdAction,
  setAppearanceModelAction,
  setErrorByPropAction,
  setLookAndFeelToDefaultAction,
  updateStoreByPropAction,
  removeErrorByPropAction,
  updateWatchAction,
  setScrollToFieldNameAction,
} = slice.actions;

export default slice.reducer;
