import type {
    UpdateRowDimensionsAction,
    ShowActionsMenuAction,
    ApplyPropsAction,
    ShowColumnMenuAction,
} from '../actions'
import { createReducer } from '../utils/createReducer'

export type GridViewState = {
    loading: number | boolean
    rowHeight: number
    numberOfRowsInView: number
    actionsMenuEnabled: boolean
    actionsMenu:
        | { visible: false; rowId: null; coordinates: null }
        | {
              visible: true
              rowId: string | number
              coordinates: { top: number; left: number }
          }
    footerEnabled: boolean
    columnMenuEnabled: boolean
    columnMenu:
        | { visible: false; coordinates: null }
        | {
              visible: true
              coordinates: { top: number; left: number }
          }
}

const initialState: GridViewState = {
    loading: false,
    rowHeight: -1,
    numberOfRowsInView: -1,
    actionsMenuEnabled: false,
    actionsMenu: {
        visible: false,
        rowId: null,
        coordinates: null,
    },
    footerEnabled: false,
    columnMenuEnabled: true,
    columnMenu: {
        visible: false,
        coordinates: null,
    },
}

export default createReducer<GridViewState>({
    initialState,
    reducers: {
        applyProps(state, action: ApplyPropsAction) {
            const {
                actionsMenuPresent,
                footerEnabled,
                enableColumnVisibilityMenu,
                loading,
            } = action.payload
            return {
                ...state,
                loading: loading ?? false,
                actionsMenuEnabled: actionsMenuPresent,
                columnMenuEnabled: !!enableColumnVisibilityMenu,
                footerEnabled,
            }
        },
        showActionsMenu(state, action: ShowActionsMenuAction) {
            return {
                ...state,
                actionsMenu: {
                    visible: true,
                    ...action.payload,
                },
            }
        },
        hideActionsMenu(state) {
            return {
                ...state,
                actionsMenu: {
                    visible: false,
                    rowId: null,
                    coordinates: null,
                },
            }
        },
        showColumnMenu(state, action: ShowColumnMenuAction) {
            return {
                ...state,
                columnMenu: {
                    visible: true,
                    ...action.payload,
                },
            }
        },
        hideColumnMenu(state) {
            return {
                ...state,
                columnMenu: {
                    visible: false,
                    coordinates: null,
                },
            }
        },
        updateRowDimensions(state, action: UpdateRowDimensionsAction) {
            const { numberOfRowsInView, rowHeight } = action.payload
            if (
                state.numberOfRowsInView !== numberOfRowsInView ||
                state.rowHeight !== rowHeight
            ) {
                return { ...state, ...action.payload }
            }
            return state
        },
    },
})

export const selectLoading = (state: GridViewState) => state.loading

export const selectNumberOfRowsInView = (state: GridViewState) =>
    state.numberOfRowsInView

export const selectRowHeight = (state: GridViewState) => state.rowHeight

export const selectActionsMenuEnabled = (state: GridViewState) =>
    state.actionsMenuEnabled
export const selectActionsMenuDetails = (state: GridViewState) =>
    state.actionsMenu

export const selectAggregationEnabled = (state: GridViewState) =>
    state.footerEnabled

export const selectColumnMenuDetails = (state: GridViewState) =>
    state.columnMenu

export const selectColumnMenuEnabled = (state: GridViewState) =>
    state.columnMenuEnabled