export const buttonColorMap = {
  solid: {
    brand: {
      base: { background: '#3366FF', text: '#FFFFFF' },
      hover: { background: '#2952CC', text: '#FFFFFF' },
      loader: '#3366FF',
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
    },
    red: {
      base: { background: '#FF4A3F', text: '#FFFFFF' },
      hover: { background: '#CB3F36', text: '#FFFFFF' },
      loader: '#FF4A3F',
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
    },
    green: {
      base: { background: '#27D665', text: '#FFFFFF' },
      hover: { background: '#1FAB51', text: '#FFFFFF' },
      loader: '#27D665',
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
    },
    maroon: {
      base: { background: '#B33771', text: '#FFFFFF' },
      hover: { background: '#9D255D', text: '#FFFFFF' },
      loader: '#B33771',
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
    },
    blue: {
      base: { background: '#36BFFF', text: '#FFFFFF' },
      hover: { background: '#2B99CC', text: '#FFFFFF' },
      loader: '#36BFFF',
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
    },
    orange: {
      base: { background: '#FA8231', text: '#FFFFFF' },
      hover: { background: '#E1752C', text: '#FFFFFF' },
      loader: '#FA8231',
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
    },
    pink: {
      base: { background: '#FC3AC6', text: '#FFFFFF' },
      hover: { background: '#CA2E9E', text: '#FFFFFF' },
      loader: '#FC3AC6',
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
    },
    purple: {
      base: { background: '#7D26CD', text: '#FFFFFF' },
      hover: { background: '#641EA4', text: '#FFFFFF' },
      loader: '#7D26CD',
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
    },
    yellow: {
      base: { background: '#fcbe3a', text: '#FFFFFF' },
      hover: { background: '#ca982e', text: '#FFFFFF' },
      loader: '#fcbe3a',
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
    },
    gray: {
      base: { background: '#6A7184', text: '#FFFFFF' },
      hover: { background: '#4A5268', text: '#FFFFFF' },
      loader: '#6A7184',
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
    },
  },
  light: {
    brand: {
      base: { background: '#EBF0FF', text: '#2952CC' },
      hover: { background: '#D6E0FF', text: '#2952CC' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#2952CC',
    },
    red: {
      base: { background: '#FFF2F1', text: '#E8463C' },
      hover: { background: '#FFDBD9', text: '#E8463C' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#E8463C',
    },
    green: {
      base: { background: '#ECFFF2', text: '#1FAB51' },
      hover: { background: '#D4F7E0', text: '#1FAB51' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#1FAB51',
    },
    maroon: {
      base: { background: '#FFF0F7', text: '#9D255D' },
      hover: { background: '#FFCFE6', text: '#9D255D' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#9D255D',
    },
    blue: {
      base: { background: '#EDF9FF', text: '#2B99CC' },
      hover: { background: '#D7F2FF', text: '#2B99CC' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#2B99CC',
    },
    orange: {
      base: { background: '#FFF5EF', text: '#E1752C' },
      hover: { background: '#FEE6D6', text: '#E1752C' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#E1752C',
    },
    pink: {
      base: { background: '#FFEEFB', text: '#CA2E9E' },
      hover: { background: '#FED8F4', text: '#CA2E9E' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#CA2E9E',
    },
    purple: {
      base: { background: '#F3ECFA', text: '#641EA4' },
      hover: { background: '#E5D4F5', text: '#641EA4' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#641EA4',
    },
    yellow: {
      base: { background: '#fffbf2', text: '#ca982e' },
      hover: { background: '#fff0d1', text: '#ca982e' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#ca982e',
    },
    gray: {
      base: { background: '#F9F9FA', text: '#4A5268' },
      hover: { background: '#F4F4F5', text: '#4A5268' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#4A5268',
    },
  },
  text: {
    brand: {
      base: { background: 'transparent', text: '#3366FF' },
      hover: { background: '#F4F4F5', text: '#3366FF' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#3366FF',
    },
    red: {
      base: { background: 'transparent', text: '#FF4A3F' },
      hover: { background: '#F4F4F5', text: '#FF4A3F' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#FF4A3F',
    },
    green: {
      base: { background: 'transparent', text: '#27D665' },
      hover: { background: '#F4F4F5', text: '#27D665' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#27D665',
    },
    maroon: {
      base: { background: 'transparent', text: '#B33771' },
      hover: { background: '#F4F4F5', text: '#B33771' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#B33771',
    },
    blue: {
      base: { background: 'transparent', text: '#36BFFF' },
      hover: { background: '#F4F4F5', text: '#36BFFF' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#36BFFF',
    },
    orange: {
      base: { background: 'transparent', text: '#FA8231' },
      hover: { background: '#F4F4F5', text: '#FA8231' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },

      loader: '#FA8231',
    },
    pink: {
      base: { background: 'transparent', text: '#FC3AC6' },
      hover: { background: '#F4F4F5', text: '#FC3AC6' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#FC3AC6',
    },
    purple: {
      base: { background: 'transparent', text: '#7D26CD' },
      hover: { background: '#F4F4F5', text: '#7D26CD' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#7D26CD',
    },
    yellow: {
      base: { background: 'transparent', text: '#fcbe3a' },
      hover: { background: '#F4F4F5', text: '#fcbe3a' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },

      loader: '#fcbe3a',
    },
    gray: {
      base: { background: 'transparent', text: '#6A7184' },
      hover: { background: '#F4F4F5', text: '#6A7184' },
      disabled: { background: '#F4F4F5', text: '#9AA2AF' },
      loader: '#6A7184',
    },
  },
} as const

export const getButtonColors = (
  theme: 'solid' | 'light' | 'text',
  color: 'brand' | 'red' | 'green' | 'maroon' | 'blue' | 'orange' | 'pink' | 'purple' | 'yellow' | 'gray',
  isHovered: boolean,
  isDisabled: boolean,
) => {
  const themeColors = buttonColorMap[theme]?.[color]
  if (!themeColors) {
    return isHovered && !isDisabled
      ? { background: '#2952CC', text: '#FFFFFF', loader: '#3366FF' }
      : { background: '#3366FF', text: '#FFFFFF', loader: '#3366FF' }
  }

  const state = isHovered && !isDisabled ? 'hover' : 'base'
  const colors = themeColors[state]

  return {
    ...colors,
    loader: themeColors.loader,
  }
}
