import { useTheme } from '../../../hooks'

// =================================
// ====== Exports ==================
// =================================

export { getColorKey, useButtonColorOptionMap, useGradientColorMap, useIconButtonColorOptionMap }
export type { ButtonAppearanceUnion, IconButtonAppearanceUnion }

// =================================
// ====== Constants ================
// =================================

const BUTTON_APPEARANCES = {
  danger: 'danger',
  interaction: 'interaction',
} as const

type ButtonAppearanceUnion = (typeof BUTTON_APPEARANCES)[keyof typeof BUTTON_APPEARANCES]

const ICON_BUTTON_APPEARANCES = {
  ...BUTTON_APPEARANCES,
  neutral: 'neutral',
} as const

type IconButtonAppearanceUnion =
  (typeof ICON_BUTTON_APPEARANCES)[keyof typeof ICON_BUTTON_APPEARANCES]

const BUTTON_COLOR_OPTIONS = {
  ...BUTTON_APPEARANCES,
  disabled: 'disabled',
} as const

type ButtonColorOptionUnion = (typeof BUTTON_COLOR_OPTIONS)[keyof typeof BUTTON_COLOR_OPTIONS]

const ICON_BUTTON_COLOR_OPTIONS = {
  ...BUTTON_COLOR_OPTIONS,
  ...ICON_BUTTON_APPEARANCES,
} as const

type IconButtonColorOptionUnion =
  (typeof ICON_BUTTON_COLOR_OPTIONS)[keyof typeof ICON_BUTTON_COLOR_OPTIONS]

// =================================
// ====== Hooks ====================
// =================================

type ButtonColorOptionMap = Record<ButtonColorOptionUnion, string>
function useButtonColorOptionMap(): ButtonColorOptionMap {
  const { colors } = useTheme()

  return {
    interaction: colors.interaction,
    danger: colors.statusErrorFill,
    disabled: colors.textColorDefaultDisabled,
  }
}

type IconButtonColorOptionMap = Record<IconButtonColorOptionUnion, string>
function useIconButtonColorOptionMap(): IconButtonColorOptionMap {
  const { colors } = useTheme()

  return {
    danger: colors.statusErrorFill,
    disabled: colors.textColorDefaultDisabled,
    interaction: colors.interaction,
    neutral: colors.iconColorDefaultSecondary,
  }
}

type GradientColorMap = Record<ButtonColorOptionUnion, [string, string]>
function useGradientColorMap(): GradientColorMap {
  const { colors } = useTheme()

  const defaultColorStart = colors.buttonStart || colors.interaction
  const defaultColorEnd = colors.buttonEnd || colors.interaction

  return {
    interaction: [defaultColorStart, defaultColorEnd],
    danger: [colors.statusErrorFill, colors.statusErrorFill],
    disabled: [
      colors.fillColorButtonNeutralSolidDisabled,
      colors.fillColorButtonNeutralSolidDisabled,
    ],
  }
}

// =================================
// ====== Functions ================
// =================================

interface GetColorKeyArgs<T> {
  disabled: boolean | null
  loading?: boolean
  appearance: T
}

function getColorKey<T extends ButtonAppearanceUnion | IconButtonAppearanceUnion>({
  disabled,
  loading,
  appearance,
}: GetColorKeyArgs<T>) {
  if (disabled || loading) return 'disabled'
  return appearance
}