import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import MailOutlineRoundedIcon from '@mui/icons-material/MailOutlineRounded';
import {SvgIconTypeMap} from "@mui/material";
import {OverridableComponent} from "@mui/material/OverridableComponent";
import {TuneRounded} from "@mui/icons-material";
import QueryStatsRoundedIcon from '@mui/icons-material/QueryStatsRounded';
import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded';
import TroubleshootRoundedIcon from '@mui/icons-material/TroubleshootRounded';
import AdminPanelSettingsRoundedIcon from '@mui/icons-material/AdminPanelSettingsRounded';


enum SelectableSection {
    message = 'message',
    configuration = 'settings',
    message_statistic = 'message_statistic',
    applications_management = 'applications_management',
    administrator_menu = 'administrator_menu',
    audit = 'audit'
}

type SelectableSectionInfo = {
    name: string;
    displayName: string;
    icon: OverridableComponent<SvgIconTypeMap>;
    isInTabMenu: boolean;
};

const selectableSectionInfoMap: Record<SelectableSection, SelectableSectionInfo> = {
    [SelectableSection.message]: {
        name: 'message',
        displayName: 'Message monitoring',
        icon: MailOutlineRoundedIcon,
        isInTabMenu: true
    },
    [SelectableSection.configuration]: {
        name: 'settings',
        displayName: 'Configuration',
        icon: TuneRounded,
        isInTabMenu: true
    },
    [SelectableSection.message_statistic]: {
        name: 'message_statistics',
        displayName: 'Message Statistics',
        icon: QueryStatsRoundedIcon,
        isInTabMenu: true
    },
    [SelectableSection.applications_management]: {
        name: 'applications_management',
        displayName: 'Applications Management',
        icon: HandymanRoundedIcon,
        isInTabMenu: true
    },
    [SelectableSection.administrator_menu]: {
        name: 'administrator_menu',
        displayName: 'Administrator Menu',
        icon: AdminPanelSettingsRoundedIcon, //AdminPanelSettingsOutlinedIcon
        isInTabMenu: true
    },
    [SelectableSection.audit]: {
        name: 'audit',
        displayName: 'Audit',
        icon: TroubleshootRoundedIcon,
        isInTabMenu: true
    }
};

interface SelectableSectionsState {
    selected: SelectableSection;
}

const initialState: SelectableSectionsState  = {
    selected: SelectableSection.message,
};

const selectedSectionSlice = createSlice({
    name: 'selectedSections',
    initialState,
    reducers: {
        setSelectedSection: (state, action: PayloadAction<SelectableSection>) => {
            state.selected = action.payload;
        }
    },
});

export const { setSelectedSection } = selectedSectionSlice.actions;

export default selectedSectionSlice.reducer;

export const selectSelectedSection = (state: { selectableSections: SelectableSectionsState }) =>
    state.selectableSections.selected;

export const getSelectableSectionInfo = (selectableSection: SelectableSection): SelectableSectionInfo =>
    selectableSectionInfoMap[selectableSection];