import dayjs from 'dayjs';
import timezonePlugin from 'dayjs/plugin/timezone';
import utcPlugin from 'dayjs/plugin/utc';
import { createSlice } from '@reduxjs/toolkit';

import {
  EVENT_STATUS_ACTIVE,
  EVENT_UX_TYPES_IMAGE,
  EVENT_UX_TYPES_SAME,
  NON_RECURRING,
  TAB_EVENT_DETAILS,
} from '../../constants';

dayjs.extend(utcPlugin);
dayjs.extend(timezonePlugin);

const initialState = {
  id: null,
  name: '',
  description: '',
  timezone: dayjs.tz.guess(),
  region: 'US_EAST',
  delivery: 'INTERNAL',
  url: '',
  rtmpInputUrl: '',
  rtmpSecondaryInputUrl: '',
  rtmpStreamKey: '',
  rtmpSecondaryStreamKey: '',
  status: '',
  schedules: [],
  scheduleErrors: {},
  streamId: '',
  indicationText: 'Live',
  // the custom color which independent of theme
  indicationColor: '#2F56E7',
  publisherId: 0,
  contentOwnerId: 0,
  playerId: 0,
  userId: null,
  playerAspectRatio: '',
  guid: '',
  preEventText: 'Live event will start in',
  preEventType: EVENT_UX_TYPES_IMAGE,
  preEventId: null,
  postEventText: 'Live event ended',
  postEventType: EVENT_UX_TYPES_SAME,
  postEventId: null,
  transitionText: 'Live event will start shortly',
  countdown: true,
  preEventImages: [],
  postEventImages: [],
  publishers: [],
  publisher: null,
  players: [],
  isLoading: true,
  errors: {},
  isEditContinue: false,
  embedCode: '',
  activeTabId: TAB_EVENT_DETAILS,
  createdPreEventPlaylist: false,
  createdPostEventPlaylist: false,
  playerConfig: null,
  eventStatus: EVENT_STATUS_ACTIVE,
  liveStreamRequestFailed: false,
  liveCcEnabled: false,
  liveCcLang: '',
  isTimezoneDisabled: false,
  recurrentPeriod: NON_RECURRING,
  recurrentEndDate: 0,
  displayViewersCounter: false,
  viewersAmount: null,
  forcePoster: false,
  forcePosterType: null,
  prevValue: {},

  tmPlaylist: null,
  player: null,
  recurrent: null,
  publisherInfo: null,
  liveEventSchedules: null,
  aspectRatio: '',
};

export const slice = createSlice({
  name: '@@LIVE_EVENTS/LIVE_EVENT',
  initialState,

  reducers: {
    getLiveEventDefaultImagesAction: (state) => state,
    getLiveEventImageAction: (state) => state,
    getLiveEventContentOwnerAction: (state) => state,
    getPublishersAction: (state) => state,
    getPublisherPlayersAction: (state) => state,
    getLiveEventByIdAction: (state) => state,
    getLiveEventEmbedCodeAction: (state) => state,
    createLiveEventFlowAction: (state) => state,
    createLiveEventAction: (state) => state,
    createLiveStreamAction: (state) => state,
    createLiveEventImageAction: (state) => state,
    uploadLiveEventImageFlowAction: (state) => state,
    uploadLiveEventImageToS3Action: (state) => state,
    updateLiveEventFlowAction: (state) => state,
    updateLiveEventAction: (state) => state,
    updateLiveStreamAction: (state) => state,
    updateLiveEventImageAction: (state) => state,
    setIsLoadingAction: (state, action) => {
      state.isLoading = action.payload;
    },
    setLiveEventDefaultImagesAction: (state) => state,
    setLiveEventDataAction: (state, action) => {
      Object.keys(action.payload ?? {}).forEach((key) => {
        state[key] = action.payload[key];
      });
      state.publisherId = action.payload.player?.publisher?.id;
    },
    setLiveStreamDataAction: (state) => state,
    setLiveEventEmbedCodeAction: (state, action) => {
      state.embedCode = action.payload;
    },
    setActiveTabIdAction: (state, action) => {
      state.activeTabId = action.payload;
    },
    setLiveEventSchedulesAction: (state) => state,
    updateLiveEventByParamAction: (state) => state,
    deleteLiveEventPlaylistAction: (state) => state,
    clearFormAction: () => initialState,
    setErrorAction: (state, action) => {
      Object.keys(action.payload ?? {}).forEach((key) => {
        state.errors[key] = action.payload[key];
      });
    },
    testLiveEventEndPointAction: (state) => state,
    cancelLiveStreamRequestAction: (state) => state,
    createLiveEventEndpointAction: (state) => state,
    getPlayerConfigAction: (state) => state,
    getTmPlaylistAction: (state) => state,
    getPublisherInfoByIdAction: (state) => state,
    getViewersCounterAction: (state) => state,
    updateViewersCounterStatusAction: (state) => state,
    updateForcePosterStatusAction: (state) => state,
    updateLiveEventFormAction: (state, action) => {
      Object.keys(action.payload ?? {}).forEach((key) => {
        state[key] = action.payload[key];
      });
    },
  },
});

export const {
  cancelLiveStreamRequestAction,
  clearFormAction,
  createLiveEventAction,
  createLiveEventEndpointAction,
  createLiveEventFlowAction,
  createLiveEventImageAction,
  createLiveStreamAction,
  deleteLiveEventPlaylistAction,
  getLiveEventByIdAction,
  getLiveEventContentOwnerAction,
  getLiveEventDefaultImagesAction,
  getLiveEventEmbedCodeAction,
  getLiveEventImageAction,
  getPlayerConfigAction,
  getPublisherInfoByIdAction,
  getPublisherPlayersAction,
  getPublishersAction,
  getTmPlaylistAction,
  getViewersCounterAction,
  setActiveTabIdAction,
  setErrorAction,
  setIsLoadingAction,
  setLiveEventDataAction,
  setLiveEventEmbedCodeAction,
  setLiveStreamDataAction,
  testLiveEventEndPointAction,
  updateForcePosterStatusAction,
  updateLiveEventAction,
  updateLiveEventFlowAction,
  updateLiveEventFormAction,
  updateLiveEventImageAction,
  updateLiveStreamAction,
  updateViewersCounterStatusAction,
  uploadLiveEventImageFlowAction,
  uploadLiveEventImageToS3Action,
} = slice.actions;

export default slice.reducer;
