import React, { createContext, useCallback, useContext, useState } from 'react'
import { createTheme, ThemeProvider } from '@mui/material'
import appConfig from '@/configs/app'
import { defineConfig } from '@/utils'
import type { AppThemeMode, SystemPalette } from '@/configs/config'

export const YaColorModeContext = createContext({
  selectedMode: '',
  toggleMode: () => {},
  selectedPalette: '',
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  changePalette: (p: SystemPalette) => {},
})

// see https://bareynol.github.io/mui-theme-creator/ for help.
export const presetPalette: SystemPalette[] = [
  {
    primary: {
      main: '#ef613e',
      light: '#F28064',
      dark: '#A7432B',
      contrastText: '#fff',
    },
    secondary: {
      main: '#ffb980',
      light: '#FFC799',
      dark: '#B28159',
      contrastText: 'rgba(0 0 0 / 0.87)',
    },
  },
  {
    primary: {
      main: '#22c3aa',
      light: '#4ECFBB',
      dark: '#178876',
      contrastText: '#fff',
    },
    secondary: {
      main: '#6be6c1',
      light: '#88EBCD',
      dark: '#4AA187',
      contrastText: 'rgba(0 0 0 / 0.87)',
    },
  },
  {
    primary: {
      main: '#626c91',
      light: '#8189A7',
      dark: '#444B65',
      contrastText: '#fff',
    },
    secondary: {
      main: '#a0a7e6',
      light: '#B3B8EB',
      dark: '#7074A1',
      contrastText: 'rgba(0 0 0 / 0.87)',
    },
  },
  {
    primary: {
      main: '#1890ff',
      light: '#46A6FF',
      dark: '#1064B2',
      contrastText: '#fff',
    },
    secondary: {
      main: '#5ab1ef',
      light: '#7BC0F2',
      dark: '#3E7BA7',
      contrastText: 'rgba(0 0 0 / 0.87)',
    },
  },
]

const defaultPalette = {
  yacolor: {
    bg: {
      main: '#fff',
      dark: '#212121',
      light: '#fff',
      contrastText: '#fff',
    },
    fc: {
      main: '#0a1929',
      dark: '#f3f6f9',
      light: '#0a1929',
      contrastText: '#fff',
    },
    boc: {
      main: '#e0e3e7',
      light: '#e0e3e7',
      dark: '#595959',
      contrastText: '#fff',
    },
    sdc: {
      main: 'rgba(190 202 218 / 17%)',
      light: 'rgba(190 202 218 / 17%)',
      dark: 'rgba(0 0 0 / 2%)',
      contrastText: '#fff',
    },
  },
}

const YaThemeModeContextProvider = (props: React.PropsWithChildren<any>) => {
  const { children } = props
  const defaultMode = window.localStorage.getItem('ya_mode') ?? appConfig.mode ?? 'light'
  let p = {}
  if (window.localStorage.getItem('ya_palette') !== null) {
    p = JSON.parse(window.localStorage.getItem('ya_palette')!)
  } else {
    p = appConfig.palette ?? presetPalette[0]
  }
  const [mode, setMode] = useState<keyof typeof AppThemeMode>(defaultMode as any)
  const [paletteColor, setPaletteColor] = useState<SystemPalette>(p)
  const colorMode = React.useMemo(
    () => ({
      selectedMode: mode,
      selectedPalette: JSON.stringify(paletteColor),
      toggleMode: () => {
        setMode((prevMode) => {
          const value = prevMode === 'light' ? 'dark' : 'light'
          window.localStorage.setItem('ya_mode', value)
          return value
        })
      },
      changePalette: (pal: SystemPalette) => {
        if (pal) {
          setPaletteColor({ ...pal })
          const palStr = JSON.stringify(pal)
          window.localStorage.setItem('ya_palette', palStr)
        }
      },
    }),
    [mode, paletteColor],
  )
  const yaTheme = React.useMemo(() => {
    return createTheme({
      palette: {
        mode,
        ...defaultPalette,
        ...paletteColor,
      },
    })
  }, [mode, paletteColor])

  return (
    <YaColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={yaTheme}>{children}</ThemeProvider>
    </YaColorModeContext.Provider>
  )
}

export function usePresetPalette() {
  return defineConfig(presetPalette)
}

export function useSelectedPalette() {
  return useContext(YaColorModeContext).selectedPalette
}

export function useSelectedMode() {
  const { selectedMode } = useContext(YaColorModeContext)
  return selectedMode
}

export function useChangePalette() {
  const { changePalette } = useContext(YaColorModeContext)
  return useCallback(changePalette, [changePalette])
}

export function useChangeMode() {
  const { toggleMode } = React.useContext(YaColorModeContext)
  return React.useCallback(toggleMode, [toggleMode])
}

export default YaThemeModeContextProvider