erp-platform/ui/src/store/theme.model.ts

import type { Action } from 'easy-peasy'
import { action } from 'easy-peasy'
import { themeConfig } from '../configs/theme.config'
import {
  LAYOUT_TYPE_CLASSIC,
  LAYOUT_TYPE_DECKED,
  LAYOUT_TYPE_MODERN,
  LAYOUT_TYPE_STACKED_SIDE,
  MODE_DARK,
  MODE_LIGHT,
  NAV_MODE_DARK,
  NAV_MODE_LIGHT,
  NAV_MODE_THEMED,
  NAV_MODE_TRANSPARENT,
} from '../constants/theme.constant'
import { Direction, Mode, NavMode } from '@/@types/theme'

export interface ThemeStoreModel {
  themeColor: string
  direction: Direction
  mode: Mode
  primaryColorLevel: number
  cardBordered: boolean
  panelExpand: boolean
  controlSize: string
  navMode: NavMode
  layout: {
    previousType?: string
    type: string
    sideNavCollapse: boolean
  }
}

export interface ThemeStoreActions {
  setDirection: Action<ThemeStoreModel, Direction>
  setMode: Action<ThemeStoreModel, Mode>
  setLayout: Action<ThemeStoreModel, string>
  setPreviousLayout: Action<ThemeStoreModel, string>
  setSideNavCollapse: Action<ThemeStoreModel, boolean>
  setNavMode: Action<ThemeStoreModel, NavMode | 'default'>
  setPanelExpand: Action<ThemeStoreModel, boolean>
  setThemeColor: Action<ThemeStoreModel, string>
  setThemeColorLevel: Action<ThemeStoreModel, number>
}

export type ThemeModel = ThemeStoreModel & ThemeStoreActions

const availableNavColorLayouts = [LAYOUT_TYPE_CLASSIC, LAYOUT_TYPE_STACKED_SIDE, LAYOUT_TYPE_DECKED]

const initialNavMode = () => {
  if (themeConfig.layout.type === LAYOUT_TYPE_MODERN && themeConfig.navMode !== NAV_MODE_THEMED) {
    return NAV_MODE_TRANSPARENT
  }

  return themeConfig.navMode
}

const initialState: ThemeStoreModel = {
  themeColor: themeConfig.themeColor,
  direction: themeConfig.direction,
  mode: themeConfig.mode,
  primaryColorLevel: themeConfig.primaryColorLevel,
  panelExpand: themeConfig.panelExpand,
  navMode: initialNavMode(),
  layout: themeConfig.layout,
  cardBordered: true,
  controlSize: 'md',
}

export const themeModel: ThemeModel = {
  ...initialState,
  setDirection: action((state, payload) => {
    state.direction = payload
  }),
  setMode: action((state, payload) => {
    const availableColorNav = availableNavColorLayouts.includes(state.layout.type)

    if (availableColorNav && payload === MODE_DARK && state.navMode !== NAV_MODE_THEMED) {
      state.navMode = NAV_MODE_DARK
    }
    if (availableColorNav && payload === MODE_LIGHT && state.navMode !== NAV_MODE_THEMED) {
      state.navMode = NAV_MODE_LIGHT
    }
    state.mode = payload
  }),
  setLayout: action((state, payload) => {
    state.cardBordered = payload === LAYOUT_TYPE_MODERN
    if (payload === LAYOUT_TYPE_MODERN) {
      state.navMode = NAV_MODE_TRANSPARENT
    }

    const availableColorNav = availableNavColorLayouts.includes(payload)

    if (availableColorNav && state.mode === MODE_LIGHT) {
      state.navMode = NAV_MODE_LIGHT
    }

    if (availableColorNav && state.mode === MODE_DARK) {
      state.navMode = NAV_MODE_DARK
    }

    state.layout.type = payload
  }),
  setPreviousLayout: action((state, payload) => {
    state.layout.previousType = payload
  }),
  setSideNavCollapse: action((state, payload) => {
    state.layout.sideNavCollapse = payload
  }),
  setNavMode: action((state, payload) => {
    if (payload !== 'default') {
      state.navMode = payload
    } else {
      if (state.layout.type === LAYOUT_TYPE_MODERN) {
        state.navMode = NAV_MODE_TRANSPARENT
      }

      const availableColorNav = availableNavColorLayouts.includes(state.layout.type)

      if (availableColorNav && state.mode === MODE_LIGHT) {
        state.navMode = NAV_MODE_LIGHT
      }

      if (availableColorNav && state.mode === MODE_DARK) {
        state.navMode = NAV_MODE_DARK
      }
    }
  }),
  setPanelExpand: action((state, payload) => {
    state.panelExpand = payload
  }),
  setThemeColor: action((state, payload) => {
    state.themeColor = payload
  }),
  setThemeColorLevel: action((state, payload) => {
    state.primaryColorLevel = payload
  }),
}