import { useMemo } from 'react'

const myTheme = {
  '--sys-color-1': ['#FFFFFF'],
  '--sys-color-2': ['linear-gradient(180deg, #233251 0%, #0B1C3E 100%)'],
  '--sys-color-3': ['#F7F8FA'],
  '--sys-color-4': ['#1F232B'],
  '--sys-color-5': ['rgba(0,0,0,0.05)'],
  '--sys-color-6': ['#EAF1FE'],
  '--sys-color-7': ['#E5E6EA'],
  '--sys-color-8': ['#848E9B'],
  '--sys-color-9': ['#2A6FF6'],
  '--sys-color-10': ['rgba(0,0,0,0.1)'],
  '--sys-color-11': ['#F2F3F5'],
  '--text-color-1': ['rgba(31, 35, 43, 1)'],
  '--text-color-2': ['rgba(77, 89, 106, 1)'],
  '--text-color-3': ['rgba(132, 142, 155, 1)']
}
const changeTheme = theme => {
  const nextTheme = theme
  Object.keys(nextTheme).forEach(key => {
    document.documentElement.style.setProperty(key, nextTheme[key][0])
  })
}

changeTheme(myTheme)

const fetchThemeColorKeyValue = () => {
  return Object.keys(myTheme ?? {}).map(key => ({
    [key]: myTheme?.[key]?.[0] ?? ''
  }))
}

const useThemeColorKeyValue = () => {
  const kVals = useMemo(() => {
    return fetchThemeColorKeyValue()
  }, [])
  return [kVals]
}

export { useThemeColorKeyValue, fetchThemeColorKeyValue }