import { SCREEN_BREAK_POINTS } from '../';

export const BREAKPOINTS = {
  xs: `${SCREEN_BREAK_POINTS.XS}px`,
  sm: `${SCREEN_BREAK_POINTS.SM}px`,
  md: `${SCREEN_BREAK_POINTS.MD}px`,
  lg: `${SCREEN_BREAK_POINTS.LG}px`,
  xl: `${SCREEN_BREAK_POINTS.XL}px`,
  xxl: `${SCREEN_BREAK_POINTS.XXL}px`,
};

export const SHORTCUTS = {
  'wh-full': 'w-full h-full',
  'hw-full': 'wh-full',
  'wh-v-full': 'w-100vw h-100vh',
  'hw-v-full': 'wh-v-full',

  'flex-center': 'flex justify-center items-center',
  'flex-col-center': 'flex-center flex-col',
  'flex-x-center': 'flex justify-center',
  'flex-x-end': 'flex justify-end',
  'flex-x-start': 'flex justify-start',
  'flex-x-between': 'flex justify-between',
  'flex-y-center': 'flex items-center',
  'flex-y-end': 'flex items-end',
  'flex-y-start': 'flex items-start',
  'i-flex-center': 'inline-flex justify-center items-center',
  'i-flex-x-center': 'inline-flex justify-center',
  'i-flex-y-center': 'inline-flex items-center',
  'flex-col': 'flex flex-col',
  'flex-col-stretch': 'flex-col items-stretch',
  'i-flex-col': 'inline-flex flex-col',
  'i-flex-col-stretch': 'i-flex-col items-stretch',
  'flex-1-hidden': 'flex-1 overflow-hidden',

  'absolute-lt': 'absolute left-0 top-0',
  'absolute-lb': 'absolute left-0 bottom-0',
  'absolute-rt': 'absolute right-0 top-0',
  'absolute-rb': 'absolute right-0 bottom-0',
  'absolute-tl': 'absolute-lt',
  'absolute-tr': 'absolute-rt',
  'absolute-bl': 'absolute-lb',
  'absolute-br': 'absolute-rb',
  'absolute-center': 'absolute transform top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
  'absolute-x-center': 'absolute transform left-1/2 -translate-x-1/2',
  'absolute-y-center': 'absolute transform top-1/2 -translate-y-1/2',

  'fixed-lt': 'fixed left-0 top-0',
  'fixed-lb': 'fixed left-0 bottom-0',
  'fixed-rt': 'fixed right-0 top-0',
  'fixed-rb': 'fixed right-0 bottom-0',
  'fixed-tl': 'fixed-lt',
  'fixed-tr': 'fixed-rt',
  'fixed-bl': 'fixed-lb',
  'fixed-br': 'fixed-rb',
  'fixed-center': 'fixed-lt flex-center wh-full',

  'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
  'text-nowrap-ellipsis': 'nowrap-hidden text-ellipsis',

  'bg-theme-base': 'bg-[var(--color-bg-base)]',
  'bg-theme-base-invert': 'bg-[var(--color-bg-base-invert)]',
  'bg-theme-container': 'bg-[var(--color-bg-container)]',
  'bg-theme-container-invert': 'bg-[var(--color-bg-container-invert)]',
  'bg-theme-elevated': 'bg-[var(--color-bg-elevated)]',
  'bg-theme-elevated-invert': 'bg-[var(--color-bg-elevated-invert)]',
  'bg-theme-layout': 'bg-[var(--color-bg-layout)]',
  'bg-theme-layout-invert': 'bg-[var(--color-bg-layout-invert)]',
  'bg-theme-mask': 'bg-[var(--color-bg-mask)]',
  'bg-theme-mask-invert': 'bg-[var(--color-bg-mask-invert)]',
  'bg-theme-spotlight': 'bg-[var(--color-bg-spotlight)]',
  'bg-theme-spotlight-invert': 'bg-[var(--color-bg-spotlight-invert)]',

  'text-theme': 'text-[var(--color-text)]',
  'text-theme-invert': 'text-[var(--color-text-invert)]',
  'text-theme-disabled': 'text-[var(--color-text-disabled)]',
  'text-theme-disabled-invert': 'text-[var(--color-text-disabled-invert)]',

  'text-link-primary': 'text-primary hover:text-primary-hover',
  'text-link-info': 'text-info hover:text-info-hover',
  'text-link-success': 'text-success hover:text-success-hover',
  'text-link-warning': 'text-warning hover:text-warning-hover',
  'text-link-error': 'text-error hover:text-error-hover',

  'border-theme': 'border-[var(--color-border)]',
  'border-theme-invert': 'border-[var(--color-border-invert)]',
  'border-theme-secondary': 'border-[var(--color-border-secondary)]',
  'border-theme-secondary-invert': 'border-[var(--color-border-secondary-invert)]',
  'border-theme-disabled': 'border-[var(--color-border-disabled)]',
  'border-theme-disabled-invert': 'border-[var(--color-border-disabled-invert)]',

  dot: 'wh-2 rounded-1/2 bg-primary mx-2',
};

export const COLORS = {
  dark: '#000000',
  white: '#ffffff',
  primary: {
    DEFAULT: 'var(--color-primary)',
    hover: 'var(--color-primary-hover)',
    active: 'var(--color-primary-active)',
    bg: {
      DEFAULT: 'var(--color-primary-bg)',
      hover: 'var(--color-primary-bg-hover)',
    },
  },
  info: {
    DEFAULT: 'var(--color-info)',
    hover: 'var(--color-info-hover)',
    active: 'var(--color-info-active)',
    bg: {
      DEFAULT: 'var(--color-info-bg)',
      hover: 'var(--color-info-bg-hover)',
    },
  },
  success: {
    DEFAULT: 'var(--color-success)',
    hover: 'var(--color-success-hover)',
    active: 'var(--color-success-active)',
    bg: {
      DEFAULT: 'var(--color-success-bg)',
      hover: 'var(--color-success-bg-hover)',
    },
  },
  warning: {
    DEFAULT: 'var(--color-warning)',
    hover: 'var(--color-warning-hover)',
    active: 'var(--color-warning-active)',
    bg: {
      DEFAULT: 'var(--color-warning-bg)',
      hover: 'var(--color-warning-bg-hover)',
    },
  },
  error: {
    DEFAULT: 'var(--color-error)',
    hover: 'var(--color-error-hover)',
    active: 'var(--color-error-active)',
    bg: {
      DEFAULT: 'var(--color-error-bg)',
      hover: 'var(--color-error-bg-hover)',
    },
  },
};