import { Platform } from 'react-native';
import legacyScale from '../../helpers/legacyScale';
import heroColors from '../hero/global/colors';
import violetColors from '../violet/global/colors';

const isWeb = Platform.OS === 'web';

const BLUE = '#1dbeee';
const FOCUS_BLUE_1 = '#003580';
const FOCUS_BLUE_2 = '#40679f';
const FOCUS_BLUE_3 = '#5d7ead';
const BACKGROUND_BLUE_1 = '#347ab7';
const BACKGROUND_BLUE_2 = '#b5eeff';
const BACKGROUND_BLUE_3 = '#e6f7ff';
const RED = '#de350b';
const ORANGE = '#ffa234';
const MAGENTA = '#ee1d84';
const PINK = '#fe56aa';
const YELLOW = '#fadb14';
const GREEN = '#01b39c';

const DARK_RED = '#a92200';
const SOFT_RED = '#ffe3db';
const DARK_GREEN = '#006e60';
const SOFT_GREEN = '#cefff9';
const DARK_ORANGE = '#e36e00';
const SOFT_ORANGE = '#fff6eb';
const DARK_PINK = '#b83f79';
const SOFT_PINK = '#fff3f9';
const DARK_YELLOW = '#ceb200';
const SOFT_YELLOW = '#ffffdf';

const BLACK = '#000000';
const GREY_1 = '#2b2b2b';
const GREY_2 = '#71767c';
const GREY_3 = '#a3a6ac';
const GREY_4 = '#d9dbdf';
const GREY_5 = '#f5f6f8';
const WHITE = '#fcfcfc';

const BASE_SIZE = isWeb ? 16.0 : legacyScale(16.0);
const FONT_SIZE = isWeb ? 16.0 : legacyScale(16.0);

/* Edit these 👇 */

const FONT_FAMILY = 'Be Vietnam Pro';

const PRIMARY_COLOR = BLUE;
const DARK_PRIMARY_COLOR = FOCUS_BLUE_1;
const LIGHT_PRIMARY_COLOR = BACKGROUND_BLUE_2;
const DANGER_COLOR = MAGENTA; /* DEPRECATED */
const ERROR_COLOR = MAGENTA;
const WARNING_COLOR = ORANGE;
const SUCCESS_COLOR = GREEN;
const INFO_COLOR = BLUE;

const TEXT_COLOR = BLACK;
const INVERTED_TEXT_COLOR = WHITE;
const DISABLED_TEXT_COLOR = GREY_3;
const MUTED_TEXT_COLOR = GREY_3;
const LINK_TEXT_COLOR = BLUE;

const BORDER_COLOR = GREY_4;
const BACKGROUND_COLOR = WHITE;
const DISABLED_BACKGROUND_COLOR = GREY_4;

const SMALL_SIZE = BASE_SIZE * 0.5;
const MEDIUM_SIZE = BASE_SIZE * 1.0;
const LARGE_SIZE = BASE_SIZE * 1.5;

const HEADER_5 = FONT_SIZE * 0.83;
const HEADER_4 = FONT_SIZE * 1.0;
const HEADER_3 = FONT_SIZE * 1.17;
const HEADER_2 = FONT_SIZE * 1.5;
const HEADER_1 = FONT_SIZE * 2.0;

const legacyVariables = {
  ...violetColors,
  ...heroColors,
  BLUE: BLUE,
  FOCUS_BLUE_1: FOCUS_BLUE_1,
  FOCUS_BLUE_2: FOCUS_BLUE_2,
  FOCUS_BLUE_3: FOCUS_BLUE_3,
  BACKGROUND_BLUE_1: BACKGROUND_BLUE_1,
  BACKGROUND_BLUE_2: BACKGROUND_BLUE_2,
  BACKGROUND_BLUE_3: BACKGROUND_BLUE_3,
  RED: RED,
  ORANGE: ORANGE,
  MAGENTA: MAGENTA,
  PINK: PINK,
  YELLOW: YELLOW,
  GREEN: GREEN,
  DARK_RED: DARK_RED,
  SOFT_RED: SOFT_RED,
  DARK_GREEN: DARK_GREEN,
  SOFT_GREEN: SOFT_GREEN,
  DARK_ORANGE: DARK_ORANGE,
  SOFT_ORANGE: SOFT_ORANGE,
  DARK_PINK: DARK_PINK,
  SOFT_PINK: SOFT_PINK,
  DARK_YELLOW: DARK_YELLOW,
  SOFT_YELLOW: SOFT_YELLOW,
  BLACK: BLACK,
  GREY_1: GREY_1,
  GREY_2: GREY_2,
  GREY_3: GREY_3,
  GREY_4: GREY_4,
  GREY_5: GREY_5,
  WHITE: WHITE,
  BASE_SIZE: BASE_SIZE,
  FONT_SIZE: FONT_SIZE,
  FONT_FAMILY: FONT_FAMILY,
  PRIMARY_COLOR: PRIMARY_COLOR,
  DARK_PRIMARY_COLOR: DARK_PRIMARY_COLOR,
  LIGHT_PRIMARY_COLOR: LIGHT_PRIMARY_COLOR,
  DANGER_COLOR: DANGER_COLOR,
  ERROR_COLOR: ERROR_COLOR,
  WARNING_COLOR: WARNING_COLOR,
  SUCCESS_COLOR: SUCCESS_COLOR,
  INFO_COLOR: INFO_COLOR,
  TEXT_COLOR: TEXT_COLOR,
  INVERTED_TEXT_COLOR: INVERTED_TEXT_COLOR,
  DISABLED_TEXT_COLOR: DISABLED_TEXT_COLOR,
  MUTED_TEXT_COLOR: MUTED_TEXT_COLOR,
  LINK_TEXT_COLOR: LINK_TEXT_COLOR,
  BORDER_COLOR: BORDER_COLOR,
  BACKGROUND_COLOR: BACKGROUND_COLOR,
  DISABLED_BACKGROUND_COLOR: DISABLED_BACKGROUND_COLOR,
  SMALL_SIZE: SMALL_SIZE,
  MEDIUM_SIZE: MEDIUM_SIZE,
  LARGE_SIZE: LARGE_SIZE,
  HEADER_5: HEADER_5,
  HEADER_4: HEADER_4,
  HEADER_3: HEADER_3,
  HEADER_2: HEADER_2,
  HEADER_1: HEADER_1,
};

export default legacyVariables;