import { OptionsKnobMap, OptionsKnobRecord } from './knobs';

export type TextColorType =
    |'white'
    |'dark'
    |'dark-5'
    |'dark-3'
    |'grey'
    |'grey-3'
    |'grey-6'
    |'key'
    |'green'
    |'red'
    |'blue'
    |'violet'
    |'pink'
    | 'light-gradient'

export const textColors: Record<TextColorType, TextColorType> = {
    white:            'white',
    dark:             'dark',
    'dark-5':         'dark-5',
    'dark-3':         'dark-3',
    grey:             'grey',
    'grey-3':         'grey-3',
    'grey-6':         'grey-6',
    key:              'key',
    green:            'green',
    red:              'red',
    blue:             'blue',
    violet:           'violet',
    pink:             'pink',
    'light-gradient': 'light-gradient'
};
export const iconColors: OptionsKnobRecord<IconColorType> = {
    default:  undefined,
    none:     'none',
    dark:     'dark',
    'dark-5': 'dark-5',
    grey:     'grey',
    white:    'white',
    key:      'key',
    green:    'green',
    red:      'red'
};
export type IconColorType = 'none' | 'dark' | 'dark-5' | 'grey' | 'white' | 'key' | 'green' | 'red';

export type SizeType =

    | 'off'
    | 'xxs'
    | 'xs'
    | 'sm'
    | 'md'
    | 'lg'
    | 'xl'
    | 'xxl';
export const sizes: Record<SizeType, SizeType> = {
    off: 'off',
    xxs: 'xxs',
    xs:  'xs',
    sm:  'sm',
    md:  'md',
    lg:  'lg',
    xl:  'xl',
    xxl: 'xxl'
};
export const sizesPixels: Record<SizeType, string> = {
    off: '0px',
    xxs: '4px',
    xs:  '8px',
    sm:  '16px',
    md:  '32px',
    lg:  '40px',
    xl:  '48px',
    xxl: '56px'
};
export type WeightType = 'bold'|'regular';
export const Weights: Record<WeightType, WeightType> = {
    regular: 'regular',
    bold:    'bold'
};

export type FormSizesType = 'xs'|'sm' | 'md' | 'lg' | 'xl' | 'xxl';
export const formSizes: OptionsKnobRecord<FormSizesType> = {
    default: undefined,
    xs:      'xs',
    sm:      'sm',
    md:      'md',
    lg:      'lg',
    xl:      'xl',
    xxl:     'xxl'
};
export const fromSizesMap = Object.keys(formSizes) as NonNullable<FormSizesType>[];
export const formSizesPixels: OptionsKnobMap<FormSizesType> = {
    default: 'lg - 48px',
    xs:      '24px',
    sm:      '32px',
    md:      '40px',
    lg:      '48px',
    xl:      '56px',
    xxl:     '64px'
};
export type RadiusSizesType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
export const radiusSizes: OptionsKnobRecord<RadiusSizesType> = {
    default: undefined,
    xs:      'xs',
    sm:      'sm',
    md:      'md',
    lg:      'lg',
    xl:      'xl',
    xxl:     'xxl'
};
export const radiusSizesPixels: OptionsKnobMap<RadiusSizesType> = {
    default: '0px',
    xs:      '2px',
    sm:      '4px',
    md:      '6px',
    lg:      '8px',
    xl:      '10px',
    xxl:     '16px'
};

export type FrameExtensionUnionType = 'solid-default'
  | 'solid-grey'
  |'solid-grey-border-grey'
  |'solid-grey-1'
  |'solid-bg'
  |'solid-key'
  |'solid-white'
  |'solid-key-translucent'
  |'solid-red-translucent'
  |'solid-green-translucent'
  |'solid-dark'
  |'solid-shadow-xl'
  |'solid-shadow-thin'
  |'solid-shadow-thin-bottom'
  |'solid-shadow-md'
  |'solid-default'
  |'border-gray'
  |'border-2-gray'
  |'border-key'
  |'border-2-key';
export type FrameExtensionType<T extends FrameExtensionUnionType> = T;