import { Semantic } from '../../types';
import { base as common } from '../../common/color/base';
import { base } from './base';
import { DesignToken } from 'style-dictionary';

/**
 * @todo evaulate how 'default' semantic value is being used and migrate away from it
 */
const text = {
  main: base.grey[900],
  subtle: base.grey[700],
  contrast: base.purple[700],
  inverse: common.white[0],
  default: base.grey[900],
};

const interaction = {
  main: base.purple[700],
  subtle: common.white[0],
  contrast: base.purple[700],
  emphasis: base.yellow[400],
  disabled: base.grey[400],
  success: common.green[600],
  error: common.red[600],
};

const fill = {
  main: common.white[0],
  contrast: base.purple[700],
  accent: base.purple[700],
  selected: base.purple[50],
  disabled: base.grey[50],
};

const background = {
  page: base.grey[25],
  container: common.white[0],
  surface: base.grey[100],
  emphasis: base.grey[50],
};

const border = {
  container: base.grey[200],
  divider: base.grey[100],
  dividerEmphasis: base.grey[900],
  interaction: {
    default: base.grey[500],
    hover: base.grey[700],
    focus: common.ultramarine[500],
    selected: base.purple[700],
  },
};

const buttonFill = {
  primary: {
    default: base.purple[700],
    hover: base.purple[600],
    focus: base.purple[700],
    disabled: base.grey[400],
    pressed: base.purple[800],
  },
  primaryInverse: {
    default: base.yellow[400],
    hover: base.yellow[300],
    focus: base.yellow[400],
    disabled: base.grey[50],
    pressed: base.yellow[500],
  },
  secondary: {
    default: common.transparent[0],
    hover: base.purple[25],
    focus: common.transparent[0],
    disabled: common.transparent[0],
    pressed: base.purple[50],
  },
  secondaryInverse: {
    default: common.transparent[0],
    hover: base.purple[600],
    focus: common.transparent[0],
    disabled: common.transparent[0],
    pressed: base.purple[800],
  },
  text: {
    default: common.transparent[0],
    hover: base.purple[25],
    focus: common.transparent[0],
    disabled: common.transparent[0],
    pressed: base.purple[50],
  },
  textInverse: {
    default: common.transparent[0],
    hover: base.purple[600],
    focus: common.transparent[0],
    disabled: common.transparent[0],
    pressed: base.purple[800],
  },
};

// foreground means button text
const buttonForeground = {
  primary: {
    default: common.white[0],
    hover: common.white[0],
    focus: common.white[0],
    disabled: common.white[0],
    pressed: common.white[0],
  },
  primaryInverse: {
    default: base.purple[700],
    hover: base.purple[700],
    focus: base.purple[700],
    disabled: base.grey[400],
    pressed: base.purple[700],
  },
  secondary: {
    default: base.purple[700],
    hover: base.purple[700],
    focus: base.purple[700],
    disabled: base.grey[400],
    pressed: base.purple[700],
  },
  secondaryInverse: {
    default: base.yellow[400],
    hover: base.yellow[400],
    focused: base.yellow[400],
    disabled: base.grey[400],
    pressed: base.yellow[400],
  },
  text: {
    default: base.purple[700],
    hover: base.purple[700],
    focus: base.purple[700],
    disabled: base.grey[400],
    pressed: base.purple[700],
  },
  textInverse: {
    default: base.yellow[400],
    hover: base.yellow[400],
    focused: base.yellow[400],
    disabled: base.grey[400],
    pressed: base.yellow[400],
  },
};

const buttonBorder = {
  primary: {
    default: base.purple[700],
    hover: base.purple[600],
    focus: base.purple[700],
    disabled: base.grey[400],
    pressed: base.purple[800],
  },
  primaryInverse: {
    default: base.yellow[400],
    hover: base.yellow[300],
    focus: base.yellow[400],
    disabled: base.grey[50],
    pressed: base.yellow[500],
  },
  secondary: {
    default: base.purple[700],
    hover: base.purple[700],
    focus: base.purple[700],
    disabled: base.grey[400],
    pressed: base.purple[700],
  },
  secondaryInverse: {
    default: base.yellow[400],
    hover: base.yellow[400],
    focus: base.yellow[400],
    disabled: base.grey[400],
    pressed: base.yellow[400],
  },
  text: {
    default: common.transparent[0],
    hover: base.purple[25],
    focus: common.transparent[0],
    disabled: common.transparent[0],
    pressed: base.purple[50],
  },
  textInverse: {
    default: common.transparent[0],
    hover: base.purple[600],
    focus: common.transparent[0],
    disabled: common.transparent[0],
    pressed: base.purple[800],
  },
};

export const semantic: Semantic<DesignToken> = {
  text,
  interaction,
  fill,
  background,
  border,
  buttonFill,
  buttonForeground,
  buttonBorder,
};