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

const interaction = {
  main: base.primary[500],
  subtle: common.white[0],
  contrast: base.primary[500],
  emphasis: base.tertiary[500],
  disabled: base.shade[700],
  success: common.success[500],
  error: common.error[500],
};

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

const text = {
  main: base.shade[700],
  subtle: base.shade[600],
  inverse: common.white[0],
  contrast: base.secondary[500],
};

const fill = {
  main: common.white[0],
  selected: base.primary[50],
  disabled: base.shade[25],
  accent: base.primary[500],
  contrast: base.secondary[500],
};

const border = {
  container: base.shade[100],
  divider: base.shade[300],
  dividerEmphasis: base.shade[800],
  interaction: {
    default: base.shade[200],
    hover: base.secondary[500],
    selected: interaction.contrast,
    focus: { value: '#3F86F7' },
  },
};

const buttonFill = {
  primary: {
    default: base.primary[500],
    hover: base.primary[400],
    focus: base.primary[600],
    disabled: base.primary[500],
    pressed: base.primary[600],
  },
  primaryInverse: {
    default: interaction.emphasis,
    hover: common.white[0],
    focus: interaction.emphasis,
    disabled: fill.disabled,
    pressed: interaction.emphasis,
  },
  secondary: {
    default: common.white[0],
    hover: common.white[0],
    focus: common.white[0],
    disabled: common.white[0],
    pressed: base.primary[50],
  },
  secondaryInverse: {
    default: common.transparent[0],
    hover: common.white[0],
    focus: common.transparent[0],
    disabled: common.transparent[0],
    pressed: base.primary[50],
  },
  text: {
    default: common.transparent[0],
    hover: common.transparent[0],
    focus: common.transparent[0],
    disabled: common.transparent[0],
    pressed: common.transparent[0],
  },
  textInverse: {
    default: common.transparent[0],
    hover: common.transparent[0],
    focus: common.transparent[0],
    disabled: common.transparent[0],
    pressed: common.transparent[0],
  },
};

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: common.white[0],
    hover: interaction.emphasis,
    focused: common.white[0],
    disabled: interaction.disabled,
    pressed: common.white[0],
  },
  secondary: {
    default: interaction.main,
    hover: interaction.main,
    focus: interaction.main,
    disabled: interaction.main,
    pressed: base.primary[600],
  },
  secondaryInverse: {
    default: common.white[0],
    hover: interaction.main,
    focused: common.white[0],
    disabled: common.white[0],
    pressed: base.primary[600],
  },
  text: {
    default: interaction.main,
    hover: interaction.main,
    focus: interaction.main,
    disabled: interaction.main,
    pressed: base.primary[600],
  },
  textInverse: {
    default: common.white[0],
    hover: interaction.main,
    focus: common.white[0],
    disabled: common.white[0],
    pressed: common.white[0],
  },
};

const buttonBorder = {
  primary: {
    default: common.transparent[0],
    hover: common.transparent[0],
    disabled: common.transparent[0],
    pressed: common.transparent[0],
  },
  primaryInverse: {
    pressed: interaction.emphasis,
    default: interaction.emphasis,
    hover: common.white[0],
    focus: interaction.emphasis,
    disabled: base.shade[700],
  },
  secondary: {
    default: interaction.main,
    hover: base.primary[400],
    focus: interaction.main,
    disabled: interaction.main,
    pressed: base.primary[600],
  },
  secondaryInverse: {
    default: common.white[0],
    hover: interaction.main,
    focus: common.white[0],
    disabled: common.white[0],
    pressed: base.primary[600],
  },
  text: {
    default: common.transparent[0],
    hover: common.transparent[0],
    focus: common.transparent[0],
    disabled: common.transparent[0],
    pressed: common.transparent[0],
  },
  textInverse: {
    default: common.transparent[0],
    hover: common.transparent[0],
    focus: common.transparent[0],
    disabled: common.transparent[0],
    pressed: common.transparent[0],
  },
};

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