const baseStyle = {}

const defaultProps = {
  size: 'lg',
  variant: 'primaryDark',
  fontWeight: 'medium',
}

const parts = ['container', 'icon', 'text']

const sizes = {
  sm: {
    container: {
      fontSize: 'sm',
      h: 24,
      minW: 48,
      spaceX: 4,
    },
    icon: {
      size: 'xs',
    },
    text: {},
  },
  md: {
    container: {
      fontSize: 'sm',
      h: 32,
      minW: 64,
      spaceX: 6,
    },
    icon: {
      size: 'sm',
    },
    text: {},
  },
  lg: {
    container: {
      fontSize: 'md',
      h: 40,
      minW: 80,
      spaceX: 8,
    },
    icon: {
      size: 'md',
    },
    text: {},
  },
  xl: {
    container: {
      fontSize: 'lg',
      h: 48,
      minW: 96,
      spaceX: 10,
    },
    icon: {
      size: 'lg',
    },
    text: {},
  },
}

const variants: Record<string, Record<string, Record<string, string>>> = {
  primaryDark: {
    container: {
      bg: 'buttonTypePrimaryDefaultBackgroundColorDark',
      borderColor: 'buttonTypePrimaryDefaultBorderColorDark',
      color: 'buttonTypePrimaryDefaultTextColorDark',
      hoverBg: 'buttonTypePrimaryHoverBackgroundColorDark',
      hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
      hoverColor: 'buttonTypePrimaryHoverTextColorDark',
      activeBg: 'buttonTypePrimaryActiveBackgroundColorDark',
      activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
      activeColor: 'buttonTypePrimaryActiveTextColorDark',
    },
  },
  primaryLight: {
    container: {
      bg: 'buttonTypePrimaryDefaultBackgroundColorLight',
      borderColor: 'buttonTypePrimaryDefaultBorderColorLight',
      color: 'buttonTypePrimaryDefaultTextColorLight',
      hoverBg: 'buttonTypePrimaryHoverBackgroundColorLight',
      hoverBorderColor: 'buttonTypePrimaryHoverBorderColorLight',
      hoverColor: 'buttonTypePrimaryHoverTextColorLight',
      activeBg: 'buttonTypePrimaryActiveBackgroundColorLight',
      activeBorderColor: 'buttonTypePrimaryActiveBorderColorLight',
      activeColor: 'buttonTypePrimaryActiveTextColorLight',
    },
  },
  secondaryDark: {
    container: {
      bg: 'buttonTypeSecondaryDefaultBackgroundColorDark',
      borderColor: 'buttonTypeSecondaryDefaultBorderColorDark',
      color: 'buttonTypeSecondaryDefaultTextColorDark',
      // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
      // hover will change from 90 to 85
      hoverBg: 'buttonTypeSecondaryHoverBackgroundColorDark',
      hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorDark',
      hoverColor: 'buttonTypeSecondaryHoverTextColorDark',
      // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
      // active will change from 95% to 90%
      activeBg: 'buttonTypeSecondaryActiveBackgroundColorDark',
      activeBorderColor: 'buttonTypeSecondaryActiveBorderColorDark',
      activeColor: 'buttonTypeSecondaryActiveTextColorDark',
    },
  },
  secondaryLight: {
    container: {
      bg: 'buttonTypeSecondaryDefaultBackgroundColorLight',
      borderColor: 'buttonTypeSecondaryDefaultBorderColorLight',
      color: 'buttonTypeSecondaryDefaultTextColorLight',
      hoverBg: 'buttonTypeSecondaryHoverBackgroundColorLight',
      hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorLight',
      hoverColor: 'buttonTypeSecondaryHoverTextColorLight',
      activeBg: 'buttonTypeSecondaryActiveBackgroundColorLight',
      activeBorderColor: 'buttonTypeSecondaryActiveBorderColorLight',
      activeColor: 'buttonTypeSecondaryActiveTextColorLight',
    },
  },
  tertiaryDark: {
    container: {
      bg: 'buttonTypeTertiaryDefaultBackgroundColorDark',
      borderColor: 'buttonTypeTertiaryDefaultBorderColorDark',
      color: 'buttonTypeTertiaryDefaultTextColorDark',
      hoverBg: 'buttonTypeTertiaryHoverBackgroundColorDark',
      hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorDark',
      hoverColor: 'buttonTypeTertiaryHoverTextColorDark',
      activeBg: 'buttonTypeTertiaryActiveBackgroundColorDark',
      activeBorderColor: 'buttonTypeTertiaryActiveBorderColorDark',
      activeColor: 'buttonTypeTertiaryActiveTextColorDark',
    },
  },
  tertiaryLight: {
    container: {
      bg: 'buttonTypeTertiaryDefaultBackgroundColorLight',
      borderColor: 'buttonTypeTertiaryDefaultBorderColorLight',
      color: 'buttonTypeTertiaryDefaultTextColorLight',
      hoverBg: 'buttonTypeTertiaryHoverBackgroundColorLight',
      hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorLight',
      hoverColor: 'buttonTypeTertiaryHoverTextColorLight',
      activeBg: 'buttonTypeTertiaryActiveBackgroundColorLight',
      activeBorderColor: 'buttonTypeTertiaryActiveBorderColorLight',
      activeColor: 'buttonTypeTertiaryActiveTextColorLight',
    },
  },
  solidBlue: {
    container: {
      bg: 'seaBlue.main',
      borderColor: 'seaBlue.main',
      color: 'white',
      disabledBg: 'darkBlue.75',
      disabledBorderColor: 'darkBlue.75',
      disabledColor: 'white',
      // proper order next: hover, focus, active
      hoverBg: 'seaBlue.20',
      hoverBorderColor: 'seaBlue.20',
      focusBg: 'seaBlue.main',
      activeBg: 'seaBlue.35',
      activeBorderColor: 'seaBlue.35',
    },
  },
  blueOutlined: {
    container: {
      bg: 'white',
      borderColor: 'seaBlue.main',
      color: 'seaBlue.main',
      disabledBg: 'white',
      disabledBorderColor: 'darkBlue.75',
      disabledColor: 'darkBlue.75',
      hoverBg: 'skyBlue.85',
      hoverBorderColor: 'seaBlue.35',
      activeBg: 'skyBlue.90',
      activeBorderColor: 'seaBlue.35',
    },
  },
  blueText: {
    container: {
      bg: 'transparent',
      borderColor: 'transparent',
      color: 'seaBlue.main',
      disabledBg: 'white',
      disabledBorderColor: 'white',
      disabledColor: 'darkBlue.75',
      hoverBg: 'skyBlue.85',
      hoverBorderColor: 'skyBlue.85',
      focusBg: 'transparent',
      activeBg: 'skyBlue.90',
      activeBorderColor: 'skyBlue.90',
    },
  },
  solidGreen: {
    container: {
      bg: 'landGreen.35',
      borderColor: 'landGreen.35',
      color: 'white',
      disabledBg: 'landGreen.70',
      disabledBorderColor: 'landGreen.70',
      disabledColor: 'white',
      hoverBg: 'landGreen.25',
      hoverBorderColor: 'landGreen.25',
      focusBg: 'landGreen.35',
      activeBg: 'landGreen.41',
      activeBorderColor: 'landGreen.41',
    },
  },
  solidRed: {
    container: {
      bg: 'energyRed.45',
      borderColor: 'energyRed.45',
      color: 'white',
      disabledBg: 'energyRed.80',
      disabledBorderColor: 'energyRed.80',
      disabledColor: 'white',
      // proper order is important next: hover >  focus >  active
      hoverBg: 'energyRed.35',
      hoverBorderColor: 'energyRed.35',
      focusBg: 'energyRed.45',
      activeBg: 'energyRed.50',
      activeBorderColor: 'energyRed.50',
    },
  },
  // subtleBlue is an internal variant, used in notification; based on primaryDark
  subtleBlue: {
    container: {
      bg: 'transparent',
      borderColor: 'transparent',
      color: 'seaBlue.main',
      disabledBg: 'white',
      disabledBorderColor: 'darkBlue.75',
      disabledColor: 'darkBlue.75',
      // proper order is important next: hover >  focus >  active
      hoverBg: 'skyBlue.90',
      hoverBorderColor: 'skyBlue.90',
      focusBg: 'transparent',
      activeBg: 'skyBlue.85',
      activeBorderColor: 'skyBlue.85',
    },
  },
  // subtleRed is an internal variant, used in notification; based on primaryDark
  subtleRed: {
    container: {
      bg: 'transparent',
      borderColor: 'transparent',
      // proper order is important next: hover >  focus >  active
      hoverBg: 'energyRed.90',
      hoverBorderColor: 'energyRed.90',
      focusBg: 'transparent',
      activeBg: 'energyRed.85',
      color: 'energyRed.45',
    },
  },
  // subtleYellow is an internal variant, used in notification; based on primaryDark
  subtleYellow: {
    container: {
      bg: 'transparent',
      borderColor: 'transparent',
      // proper order is important next: hover >  focus >  active
      hoverBg: 'sunflower.70',
      hoverBorderColor: 'sunflower.70',
      focusBg: 'transparent',
      activeBg: 'sunflower.65',
      color: 'sunflower.15',
    },
  },
  // subtleGreen is an internal variant, used in notification; based on primaryDark
  subtleGreen: {
    container: {
      bg: 'transparent',
      borderColor: 'transparent',
      // proper order is important next: hover >  focus >  active
      hoverBg: 'landGreen.90',
      hoverBorderColor: 'landGreen.90',
      focusBg: 'transparent',
      activeBg: 'landGreen.85',
      color: 'landGreen.30',
    },
  },
}

// buttonGroupDefault is an internal variant, used in ButtonGroup; based on secondaryDark
variants.buttonGroupDefault = {
  container: {
    ...variants.secondaryDark.container,
    borderColor: 'sandstone.60',
  },
}

// buttonGroupRounded is an internal variant
variants.buttonGroupRounded = {
  container: {
    bg: 'white',
    borderColor: 'sandstone.79',
    color: 'sandstone.10',
    hoverBg: 'seaBlue.20',
    hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
    hoverColor: 'white',
    activeBg: 'seaBlue.35',
    activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
    activeColor: 'white',
    borderRadius: 'round',
    marginRight: '22px',
  },
}

export default {
  baseStyle,
  defaultProps,
  parts,
  sizes,
  variants,
}
