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

const text = {
  main: base.grey[900],
  subtle: base.grey[700],
  contrast: base.tiber[800],
  inverse: common.white[0],
};

const interaction = {
  main: base.lagoon[600],
  subtle: common.white[0],
  contrast: base.turquoise[500],
  emphasis: base.coral[400],
  disabled: base.grey[400],
  success: common.green[600],
  error: common.red[600],
};

const fill = {
  main: common.white[0],
  contrast: base.lagoon[600],
  accent: base.turquoise[400],
  selected: base.lagoon[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.lagoon[600],
  },
};

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

const buttonForeground = {
  primary: {
    default: common.white[0],
    hover: common.white[0],
    disabled: common.white[0],
    pressed: common.white[0],
  },
  primaryInverse: {
    default: base.lagoon[600],
    hover: base.lagoon[600],
    focus: base.lagoon[600],
    disabled: base.grey[400],
    pressed: base.lagoon[600],
  },
  secondary: {
    default: base.lagoon[600],
    hover: base.lagoon[600],
    focus: base.lagoon[600],
    disabled: base.grey[400],
    pressed: base.lagoon[600],
  },
  secondaryInverse: {
    default: common.white[0],
    hover: common.white[0],
    focus: common.white[0],
    disabled: base.grey[400],
    pressed: common.white[0],
  },
  text: {
    default: base.lagoon[600],
    hover: base.lagoon[600],
    focus: base.lagoon[600],
    disabled: base.grey[400],
    pressed: base.lagoon[600],
  },
  textInverse: {
    default: common.white[0],
    hover: common.white[0],
    focus: common.white[0],
    disabled: base.grey[400],
    pressed: common.white[0],
  },
};

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

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