import { RuleSet, css } from 'styled-components';
import { ThemeProps } from '../components/types';
import { ITheme, IThemeFont, IThemeFontVariant } from '../theme';
import { IResponsiveVariant } from './types';

export function getVariant<T extends string>(
  type?: T,
  variants?: { [key in T]?: RuleSet<object> }
): RuleSet<object> | '' {
  return (type && variants && variants[type]) ? (variants[type] || '') : '';
}

export function getVariantKey<K extends string, T extends string>(
  key: K,
  type?: T,
  variants?: { [key in T]?: Record<K, RuleSet<object>> }
): RuleSet<object> | '' {
  if (type !== undefined && variants !== undefined && variants[type] !== undefined) {
    const variant = variants[type] as Record<K, RuleSet<object>>;
    return variant[key] || '';
  } else {
    return '';
  }
}

export function getVariantResponsive<T extends (string & {}) = (string & {})>(props: IResponsiveVariant<T> & ThemeProps, callback: (key: T, theme: ITheme) => RuleSet<object> | string) {
  const keys: (keyof IResponsiveVariant)[] = ['variant', 'variantSm', 'variantMd', 'variantLg', 'variantXl'];
  const theme = props.theme;
  const mediaQuery = theme.mediaQuery;
  return keys.map(key => {
    const value = props[key];
    if (value) {
      const rule = callback(value, theme);
      if (key !== 'variant') {
        const size: keyof typeof mediaQuery = key.replace('variant', '').toLowerCase();
        // console.log('size', size, 'rule', rule);
        return css`@media(min-width: ${mediaQuery[size]}) {
            ${rule}
          }`;
      } else {
        return rule;
      }
    } else {
      return undefined;
    }
  }).filter(Boolean);
}

export function getFontVariantResponsive(props: IResponsiveVariant<IThemeFontVariant> & ThemeProps, callback: (key: IThemeFontVariant, font: IThemeFont) => RuleSet<object> | string) {
  return getVariantResponsive<IThemeFontVariant>(props, (key, theme) => {
    const font = theme.font[key];
    return font ? callback(key, font) : '';
  });
}