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

const initialState = {
  // ui
  loading: true,
  menuIsExpanded: true,
  // account
  accountLogoUrl: null,
  accountUrl: null,
  // hub
  hubs: [],
  selectedHub: {},
  hubsLoading: false,
  // watch
  watches: [],
  watchesLoading: false,
  watchesPage: null,
  watchesPageSize: null,
  watchesRecordsTotal: null,
  // myWatch
  myWatchId: null,
  myWatchTitle: null,
  myWatchFolderName: null,
  myWatchChannels: [],
  // externalShare
  externalShareId: null,
  externalShareTitle: null,
  externalShareFolderName: null,
  // selectedWatch
  selectedWatchId: null,
  selectedWatchTitle: null,
  selectedWatchFolderName: null,
};

export const slice = createSlice({
  name: '@@HOSTED/WATCHES',
  initialState,
  reducers: {
    setInitialDataAction: (state, action) => {
      // account
      state.accountLogoUrl = action.payload.accountLogoUrl;
      state.accountUrl = action.payload.accountUrl;
      // hub
      state.hubs = action.payload.hubs;
      state.selectedHub = action.payload.selectedHub;
      // watches
      state.watches = action.payload.watches.records;
      state.watchesPage = action.payload.watches.page;
      state.watchesPageSize = action.payload.watches.pageSize;
      state.watchesRecordsTotal = action.payload.watches.recordsTotal;
      // myWatch
      state.myWatchId = action.payload.myWatch.id;
      state.myWatchTitle = action.payload.myWatch.title;
      state.myWatchFolderName = action.payload.myWatch.folderName;
      state.myWatchChannels = action.payload.myWatch.watchChannels;
      // shared
      state.externalShareId = action.payload.shared.id;
      state.externalShareTitle = action.payload.shared.title;
      state.externalShareFolderName = action.payload.shared.folderName;
      // selectedWatch
      state.selectedWatchId = action.payload.selectedWatch.id;
      state.selectedWatchTitle = action.payload.selectedWatch.title;
      state.selectedWatchFolderName = action.payload.selectedWatch.folderName;

      state.loading = false;
    },

    toggleMenuAction: (state, action) => {
      state.menuIsExpanded = action.payload;
    },

    getHubsAction: (state) => {
      state.hubsLoading = true;
    },
    setHubsAction: (state, action) => {
      state.hubs = action.payload;
      state.hubsLoading = false;
    },
    setHubAction: (state, action) => {
      state.selectedHub = action.payload;
    },

    getWatchesAction: (state) => {
      state.watchesLoading = true;
    },
    setWatchesAction: (state, action) => {
      state.watches = action.payload.records;
      state.watchesPage = action.payload.page;
      state.watchesPageSize = action.payload.pageSize;
      state.watchesRecordsTotal = action.payload.recordsTotal;
      state.watchesLoading = false;
    },

    setSelectedWatchAction: (state, action) => {
      state.selectedWatchId = action.payload.id;
      state.selectedWatchTitle = action.payload.title;
      state.selectedWatchFolderName = action.payload.folderName;
    },

    clearAllAction: () => initialState,
  },
});

export const {
  setInitialDataAction,
  toggleMenuAction,
  getHubsAction,
  setHubsAction,
  setHubAction,
  getWatchesAction,
  setWatchesAction,
  setSelectedWatchAction,
  clearAllAction,
} = slice.actions;

export default slice.reducer;
