import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { WidgetComponentData, WidgetDataSource } from '../../types/widget';

export interface WidgetState {
  designMode: boolean;
  responsive: string;
  components: WidgetComponentData[];
  placeholders: {
    slug: string;
    widgetSlugs: string[];
  }[];
  selectedPlaceholder?: string;
  selectedWidget?: string;
  selectedComponentId?: string;
  draggingActive?: boolean;
  dataSources: WidgetDataSource[];
}

const initialState: WidgetState = {
  designMode: true,
  responsive: 'mobile',
  components: [],
  placeholders: [],
  selectedPlaceholder: undefined,
  selectedWidget: undefined,
  selectedComponentId: undefined,
  draggingActive: false,
  dataSources: []
};

const widgetSlice = createSlice({
  name: 'widget',
  initialState,
  reducers: {
    setDesignMode(state, { payload }: PayloadAction<boolean>) {
      state.designMode = payload;
    },
    setResponsive(state, { payload }: PayloadAction<string>) {
      state.responsive = payload;
    },
    setComponents(state, { payload }: PayloadAction<WidgetComponentData[]>) {
      state.components = payload;
    },
    setPlaceholders(
      state,
      { payload }: PayloadAction<WidgetState['placeholders']>
    ) {
      state.placeholders = payload;
    },
    setSelectedPlaceholder(state, { payload }: PayloadAction<string>) {
      state.selectedPlaceholder = payload;
    },
    setSelectedWidget(state, { payload }: PayloadAction<string>) {
      state.selectedWidget = payload;
    },
    setSelectedComponentId(state, { payload }: PayloadAction<string>) {
      state.selectedComponentId = payload;
    },
    setDraggingActive(state, { payload }: PayloadAction<boolean>) {
      state.draggingActive = payload;
    },
    setDataSources(state, { payload }: PayloadAction<WidgetDataSource[]>) {
      state.dataSources = payload;
    }
  }
});

export const {
  setDesignMode,
  setResponsive,
  setComponents,
  setPlaceholders,
  setSelectedPlaceholder,
  setSelectedWidget,
  setSelectedComponentId,
  setDraggingActive,
  setDataSources
} = widgetSlice.actions;

export default widgetSlice.reducer;