import type { ColorButtonKey } from './interfaces'

export const gradientBgBase = 'bg-gradient-to-tr'
export const colorBgBase = "bg-emerald-50/50"
export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-rose-500`
export const gradientBgViolet = `${gradientBgBase} ${colorBgBase}`
export const gradientBgDark = `${gradientBgBase} from-slate-800 via-slate-950 to-slate-900`;
export const gradientBgPinkRed = `${gradientBgBase} from-rose-400 via-emerald-500 to-emerald-600`

export const colorsBgLight = {
  white: 'bg-white text-black',
  light: ' bg-white text-black text-black dark:bg-dark-900 dark:text-white',
  contrast: 'bg-slate-800 text-white dark:bg-white dark:text-black',
  success: 'bg-emerald-500 border-emerald-500 dark:bg-emerald-600 dark:border-emerald-600 text-white',
  danger: 'bg-rose-500 border-rose-500 text-white',
  warning: 'bg-amber-500 border-amber-500 text-white',
  info: 'bg-emerald-600 border-emerald-600 dark:bg-emerald-700 dark:border-emerald-700 text-white',
}

export const colorsText = {
  white: 'text-black dark:text-slate-100',
  light: 'text-slate-700 dark:text-slate-400',
  contrast: 'dark:text-white',
  success: 'text-emerald-500',
  danger: 'text-rose-500',
  warning: 'text-amber-500',
  info: 'text-emerald-600',
};

export const colorsOutline = {
  white: [colorsText.white, 'border-slate-100'].join(' '),
  light: [colorsText.light, 'border-slate-100'].join(' '),
  contrast: [colorsText.contrast, 'border-slate-900 dark:border-slate-100'].join(' '),
  success: [colorsText.success, 'border-emerald-500'].join(' '),
  danger: [colorsText.danger, 'border-rose-500'].join(' '),
  warning: [colorsText.warning, 'border-amber-500'].join(' '),
  info: [colorsText.info, 'border-emerald-600'].join(' '),
};

export const getButtonColor = (
  color: ColorButtonKey,
  isOutlined: boolean,
  hasHover: boolean,
  isActive = false
) => {
  if (color === 'void') {
    return ''
  }

  const colors = {
    ring: {
      white: 'ring-slate-200 dark:ring-slate-500',
      whiteDark: 'ring-slate-200 dark:ring-dark-500',
      lightDark: 'ring-slate-200 dark:ring-slate-500',
      contrast: 'ring-slate-300 dark:ring-slate-400',
      success: 'ring-emerald-300 dark:ring-emerald-700',
      danger: 'ring-rose-300 dark:ring-rose-700',
      warning: 'ring-amber-300 dark:ring-amber-700',
      info: "ring-emerald-300 dark:ring-emerald-700",
    },
    active: {
      white: 'bg-slate-100',
      whiteDark: 'bg-slate-100 dark:bg-dark-800',
      lightDark: 'bg-slate-200 dark:bg-slate-700',
      contrast: 'bg-slate-700 dark:bg-slate-100',
      success: 'bg-emerald-700 dark:bg-emerald-800',
      danger: 'bg-rose-700 dark:bg-rose-600',
      warning: 'bg-amber-700 dark:bg-amber-600',
      info: 'bg-emerald-700  dark:bg-emerald-800',
    },
    bg: {
      white: 'bg-white text-black',
      whiteDark: 'bg-white  text-black  dark:bg-dark-900 dark:text-white',
      lightDark: 'bg-slate-100 text-black dark:bg-slate-800 dark:text-white',
      contrast: 'bg-slate-800 text-white dark:bg-white dark:text-black',
      success: 'bg-emerald-600 dark:bg-emerald-600 text-white',
      danger: 'bg-rose-600 text-white    dark:bg-rose-500 ',
      warning: 'bg-amber-600 dark:bg-amber-500 text-white',
      info: " bg-emerald-600  dark:bg-emerald-600  text-white ",
    },
    bgHover: {
      white: 'hover:bg-slate-100',
      whiteDark: 'hover:bg-slate-100  hover:dark:bg-dark-800',
      lightDark: 'hover:bg-slate-200 hover:dark:bg-slate-700',
      contrast: 'hover:bg-slate-700 hover:dark:bg-slate-100',
      success:
          'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-800 hover:dark:border-emerald-800',
      danger:
        'hover:bg-rose-700 hover:border-rose-700 hover:dark:bg-rose-600 hover:dark:border-rose-600',
      warning:
        'hover:bg-amber-700 hover:border-amber-700 hover:dark:bg-amber-600 hover:dark:border-amber-600',
      info: "hover:bg-emerald-700 hover:border-emerald-700   hover:dark:bg-emerald-800 hover:dark:border-emerald-800",
    },
    borders: {
      white: 'border-white',
      whiteDark: 'border-white  dark:border-dark-900',
      lightDark: 'border-slate-100 dark:border-slate-800',
      contrast: 'border-slate-800 dark:border-white',
      success: 'border-emerald-600 dark:border-emerald-600',
      danger: 'border-rose-600 dark:border-rose-500',
      warning: 'border-amber-600 dark:border-amber-500',
      info: "border-emerald-600  border-emerald-600 dark:border-emerald-600",
    },
    text: {
      contrast: 'dark:text-slate-100',
      success: 'text-emerald-600 dark:text-emerald-500',
      danger: 'text-rose-600 dark:text-rose-500',
      warning: 'text-amber-600 dark:text-amber-500',
      info: 'text-emerald-600  dark:text-emerald-500',
    },
    outlineHover: {
      contrast:
        'hover:bg-slate-800 hover:text-slate-100 hover:dark:bg-slate-100 hover:dark:text-black',
      success: 'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-600',
      danger:
        'hover:bg-rose-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-rose-600',
      warning:
        'hover:bg-amber-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-amber-600',
      info: "hover:bg-emerald-600  hover:bg-emerald-600 hover:text-white hover:dark:text-white hover:dark:border-emerald-600",
    },
  }

  const isOutlinedProcessed = isOutlined && ['white', 'whiteDark', 'lightDark'].indexOf(color) < 0

  const base = [colors.borders[color], colors.ring[color]]

  if (isActive) {
    base.push(colors.active[color])
  } else {
    base.push(isOutlinedProcessed ? colors.text[color] : colors.bg[color])
  }

  if (hasHover) {
    base.push(isOutlinedProcessed ? colors.outlineHover[color] : colors.bgHover[color])
  }

  return base.join(' ')
}