import { CHAINS } from '@synapsecns/synapse-constants'

const ChainId = CHAINS.ChainId

const ETH_CURRENCY_TEXT_CLASSNAME = 'text-[#5170ad] dark:text-[#78a5ff]'

const COLOR_NETWORK_MAP = {
  eth: [ChainId.ETH],
  gray: [ChainId.ARBITRUM],
  yellow: [ChainId.BSC],
  green: [],
  sky: [],
  teal: [ChainId.MOONBEAM, ChainId.METIS],
  blue: [ChainId.FANTOM, ChainId.CRONOS, ChainId.TERRA],
  orange: [ChainId.KLAYTN],
  purple: [ChainId.POLYGON, ChainId.MOONRIVER],
  indigo: [],
  cyan: [ChainId.HARMONY],
  lime: [ChainId.BOBA, ChainId.AURORA, ChainId.DFK],
  red: [ChainId.AVALANCHE, ChainId.OPTIMISM],
}

const NETWORK_COLORS = {}

for (const [colorName, chainIdArr] of Object.entries(COLOR_NETWORK_MAP)) {
  for (const someChainId of chainIdArr) {
    NETWORK_COLORS[someChainId] = colorName
  }
}

export { NETWORK_COLORS }

export const getNetworkCurrencyColor = (chainId) => {
  switch (parseInt(chainId)) {
    case ChainId.BSC:
      return 'text-[#ecae0b] dark:text-[#ecae0b]'
    case ChainId.ETH:
      return ETH_CURRENCY_TEXT_CLASSNAME
    case ChainId.POLYGON:
      return 'text-purple-500 dark:text-purple-500'
    case ChainId.FANTOM:
      return 'text-blue-500 dark:text-blue-500'
    case ChainId.CRONOS:
      return 'text-blue-500 dark:text-blue-500'
    case ChainId.BOBA:
      return ETH_CURRENCY_TEXT_CLASSNAME
    case ChainId.ARBITRUM:
      return ETH_CURRENCY_TEXT_CLASSNAME
    case ChainId.OPTIMISM:
      return ETH_CURRENCY_TEXT_CLASSNAME
    case ChainId.AURORA:
      return ETH_CURRENCY_TEXT_CLASSNAME
    case ChainId.AVALANCHE:
      return 'text-red-500 dark:text-red-500'
    case ChainId.DFK:
      return 'text-lime-500 dark:text-lime-500'
    case ChainId.HARMONY:
      return 'text-cyan-500 dark:text-cyan-500'
    case ChainId.MOONBEAM:
      return 'text-teal-500 dark:text-teal-500'
    case ChainId.METIS:
      return 'text-teal-500 dark:text-teal-500'
    case ChainId.KLAYTN:
      return 'text-orange-500 dark:text-orange-500'
    default:
      return ''
  }
}

export const getNetworkButtonBgClassName = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'bg-stone-800 hover:bg-stone-900 active:bg-[#3c3c44]'
    case 'eth':
      return 'bg-[#5170ad] hover:bg-[#3f4f8c] active:bg-[#314367]'
    case 'purple':
      return 'bg-purple-500 hover:bg-purple-600 active:bg-purple-700'
    case 'blue':
      return 'bg-blue-500 hover:bg-blue-600 active:bg-blue-700'
    case 'lime':
      return 'bg-lime-500 hover:bg-lime-600 active:bg-lime-700'
    case 'gray':
      return 'bg-gray-500 hover:bg-gray-600 active:bg-gray-700'
    case 'red':
      return 'bg-red-500 hover:bg-red-600 active:bg-red-700'
    case 'cyan':
      return 'bg-cyan-500 hover:bg-cyan-600 active:bg-cyan-700'
    case 'teal':
      return 'bg-teal-500 hover:bg-teal-600 active:bg-teal-700'
    case 'orange':
      return 'bg-orange-500 hover:bg-orange-600 active:bg-orange-700'
    default:
      return ''
  }
}

export const getNetworkButtonBgClassNameActive = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'dark:active:!bg-[#3c3c44] '
    case 'eth':
      return 'dark:active:!bg-[#314367] '
    case 'purple':
      return 'dark:active:!bg-purple-700 '
    case 'blue':
      return 'dark:active:!bg-blue-700 '
    case 'lime':
      return 'dark:active:!bg-lime-700 '
    case 'gray':
      return 'dark:active:!bg-gray-700 '
    case 'red':
      return 'dark:active:!bg-red-700 '
    case 'cyan':
      return 'dark:active:!bg-cyan-700 '
    case 'teal':
      return 'dark:active:!bg-teal-700 '
    case 'orange':
      return 'dark:active:!bg-orange-700 '
    default:
      return ''
  }
}

export const getNetworkButtonBorderHover = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'hover:!border-[#ecae0b]'
    case 'eth':
      return 'hover:!border-[#5170ad]'
    case 'purple':
      return 'hover:!border-purple-500'
    case 'blue':
      return 'hover:!border-blue-500'
    case 'lime':
      return 'hover:!border-lime-500'
    case 'gray':
      return 'hover:!border-gray-500'
    case 'red':
      return 'hover:!border-red-500'
    case 'cyan':
      return 'hover:!border-cyan-500'
    case 'teal':
      return 'hover:!border-teal-500'
    case 'orange':
      return 'hover:!border-orange-500'
    default:
      return ''
  }
}

export const getNetworkButtonBorderActive = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'focus:!border-[#ecae0b] active:!border-[#ecae0b]'
    case 'eth':
      return 'focus:!border-[#5170ad] active:!border-[#5170ad]'
    case 'purple':
      return 'focus:!border-purple-500 active:!border-purple-500'
    case 'blue':
      return 'focus:!border-blue-500 active:!border-blue-500'
    case 'lime':
      return 'focus:!border-lime-500 active:!border-lime-500'
    case 'gray':
      return 'focus:!border-gray-500 active:!border-gray-500'
    case 'red':
      return 'focus:!border-red-500 active:!border-red-500'
    case 'cyan':
      return 'focus:!border-cyan-500 active:!border-cyan-500'
    case 'teal':
      return 'focus:!border-teal-500 active:!border-teal-500'
    case 'orange':
      return 'focus:!border-orange-500 active:!border-orange-500'
    default:
      return ''
  }
}

export const getNetworkButtonBorder = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'border-[#ecae0b] dark:border-[#ecae0b]'
    case 'eth':
      return 'border-[#5170ad] dark:border-[#5170ad]'
    case 'purple':
      return 'border-purple-500 dark:border-purple-500'
    case 'blue':
      return 'border-blue-500 dark:border-blue-500'
    case 'lime':
      return 'border-lime-500 dark:border-lime-500'
    case 'gray':
      return 'border-gray-500 dark:border-gray-500'
    case 'red':
      return 'border-red-500 dark:border-red-500'
    case 'cyan':
      return 'border-cyan-500 dark:border-cyan-500'
    case 'teal':
      return 'border-teal-500 dark:border-teal-500'
    case 'orange':
      return 'border-orange-500 dark:border-orange-500'
    default:
      return ''
  }
}

export const getNetworkButtonBorderImportant = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return '!border-[#ecae0b] dark:!border-[#ecae0b]'
    case 'eth':
      return '!border-[#5170ad] dark:!border-[#5170ad]'
    case 'purple':
      return '!border-purple-500 dark:!border-purple-500'
    case 'blue':
      return '!border-blue-500 dark:!border-blue-500'
    case 'lime':
      return '!border-lime-500 dark:!border-lime-500'
    case 'gray':
      return '!border-gray-500 dark:!border-gray-500'
    case 'red':
      return '!border-red-500 dark:!border-red-500'
    case 'cyan':
      return '!border-cyan-500 dark:!border-cyan-500'
    case 'teal':
      return '!border-teal-500 dark:!border-teal-500'
    case 'orange':
      return '!border-orange-500 dark:!border-orange-500'
    default:
      return ''
  }
}

export const getNetworkTextColor = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'text-[#ecae0b] dark:text-[#ecae0b]'
    case 'eth':
      return 'text-[#5170ad] dark:text-[#78a5ff]'
    case 'purple':
      return 'text-purple-500 dark:text-purple-500'
    case 'blue':
      return 'text-blue-500 dark:text-blue-500'
    case 'lime':
      return 'text-lime-500 dark:text-lime-500'
    case 'gray':
      return 'text-gray-500 dark:text-gray-500'
    case 'red':
      return 'text-red-500 dark:text-red-500'
    case 'cyan':
      return 'text-cyan-500 dark:text-cyan-500'
    case 'teal':
      return 'text-teal-500 dark:text-teal-500'
    case 'orange':
      return 'text-orange-500 dark:text-orange-500'
    default:
      return ''
  }
}

export const getNetworkTextHoverColor = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'hover:text-[#ecae0b]'
    case 'eth':
      return 'hover:text-[#78a5ff]'
    case 'purple':
      return 'hover:text-purple-500'
    case 'blue':
      return 'hover:text-blue-500'
    case 'lime':
      return 'hover:text-lime-500'
    case 'gray':
      return 'hover:text-gray-500'
    case 'red':
      return 'hover:text-red-500'
    case 'cyan':
      return 'hover:text-cyan-500'
    case 'teal':
      return 'hover:text-teal-500'
    case 'orange':
      return 'hover:text-orange-500'
    default:
      return ''
  }
}

export const getNetworkLinkTextColor = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return '!text-gray-800 hover:!text-[#ecae0b] dark:!text-[#ecae0b] dark:hover:!text-[#ecae0b]'
    case 'eth':
      return '!text-[#5170ad] hover:!text-[#78a5ff] dark:hover:!text-[#78a5ff]'
    case 'purple':
      return '!text-purple-500 hover:!text-purple-600 dark:hover:!text-purple-500'
    case 'blue':
      return '!text-blue-500 hover:!text-blue-600 dark:hover:!text-blue-500'
    case 'lime':
      return '!text-lime-500 hover:!text-lime-600 dark:hover:!text-lime-500'
    case 'gray':
      return '!text-gray-500 hover:!text-gray-600 dark:hover:!text-gray-500'
    case 'red':
      return '!text-red-500 hover:!text-red-600 dark:hover:!text-red-500'
    case 'cyan':
      return '!text-cyan-500 hover:!text-red-600 dark:hover:!text-cyan-500'
    case 'teal':
      return '!text-teal-500 hover:!text-teal-600 dark:hover:!text-teal-500'
    case 'orange':
      return '!text-orange-500 hover:!text-orange-600 dark:hover:!text-orange-500'
    default:
      return ''
  }
}

export const getNetworkTextColorContrast = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'text-[#ecae0b]'
    case 'eth':
      return 'text-white'
    case 'purple':
      return 'text-white'
    case 'blue':
      return 'text-white'
    case 'lime':
      return 'text-white'
    case 'gray':
      return 'text-white'
    case 'red':
      return 'text-white'
    case 'cyan':
      return 'text-white'
    case 'teal':
      return 'text-white'
    case 'orange':
      return 'text-white'
    default:
      return ''
  }
}

export const getNetworkTextColorContrastHover = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'group-hover:text-[#ecae0b]'
    case 'eth':
      return 'group-hover:text-white'
    case 'purple':
      return 'group-hover:text-white'
    case 'blue':
      return 'group-hover:text-white'
    case 'lime':
      return 'group-hover:text-white'
    case 'gray':
      return 'group-hover:text-white'
    case 'red':
      return 'group-hover:text-white'
    case 'cyan':
      return 'group-hover:text-white'
    case 'teal':
      return 'group-hover:text-white'
    case 'orange':
      return 'group-hover:text-white'
    default:
      return ''
  }
}

export const getNetworkBgClassName = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'bg-stone-800'
    case 'eth':
      return 'bg-[#5170ad]'
    case 'purple':
      return 'bg-purple-500'
    case 'blue':
      return 'bg-blue-500'
    case 'lime':
      return 'bg-lime-500'
    case 'gray':
      return 'bg-gray-500'
    case 'red':
      return 'bg-red-500'
    case 'cyan':
      return 'bg-cyan-500'
    case 'teal':
      return 'bg-teal-500'
    case 'orange':
      return 'bg-orange-500'
    default:
      return ''
  }
}

export const getNetworkBgClassNameLightDark = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'bg-[#ecae0b] '
    case 'eth':
      return 'bg-[#5170ad] '
    case 'purple':
      return 'bg-purple-500 '
    case 'blue':
      return 'bg-blue-500 '
    case 'lime':
      return 'bg-lime-500 '
    case 'gray':
      return 'bg-gray-500 '
    case 'red':
      return 'bg-red-500 '
    case 'cyan':
      return 'bg-cyan-500 '
    case 'teal':
      return 'bg-teal-500 '
    case 'orange':
      return 'bg-orange-500 '
    default:
      return ''
  }
}

export const getNetworkShadow = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return ' !shadow-yellow-600 hover:shadow-yellow-500'
    case 'eth':
      return ' !shadow-blue-600 hover:shadow-blue-500'
    case 'purple':
      return ' !shadow-purple-600 hover:shadow-purple-500'
    case 'blue':
      return ' !shadow-blue-600 hover:shadow-blue-500'
    case 'lime':
      return ' !shadow-lime-600 hover:shadow-lime-500'
    case 'gray':
      return '  hover:shadow-2xl'
    case 'red':
      return ' !shadow-red-600 hover:shadow-red-500'
    case 'cyan':
      return ' !shadow-cyan-600 hover:shadow-cyan-500'
    case 'teal':
      return ' !shadow-teal-600 hover:shadow-teal-500'
    case 'orange':
      return ' !shadow-orange-500 hover:!shadow-orange-500'
    default:
      return ''
  }
}

export const getNetworkHoverShadow = (chainId) => {
  switch (NETWORK_COLORS[chainId]) {
    case 'yellow':
      return 'hover:!shadow-yellow-500'
    case 'eth':
      return 'hover:!shadow-blue-500'
    case 'purple':
      return 'hover:!shadow-purple-500'
    case 'blue':
      return 'hover:!shadow-blue-500'
    case 'lime':
      return 'hover:!shadow-lime-500'
    case 'gray':
      return 'hover:!shadow-500'
    case 'red':
      return 'hover:!shadow-red-500'
    case 'cyan':
      return 'hover:!shadow-cyan-500'
    case 'teal':
      return 'hover:!shadow-teal-500'
    case 'orange':
      return 'hover:!shadow-orange-500'
    default:
      return ''
  }
}