import { createIconSet } from 'react-native-vector-icons';
import styled from '@emotion/native';
import glyphMap from './glyphMap.json';

type ThemeSize =
  | 'xxxsmall'
  | 'xsmall'
  | 'small'
  | 'medium'
  | 'large'
  | 'xlarge';
type ThemeIntent =
  | 'text'
  | 'primary'
  | 'secondary'
  | 'info'
  | 'danger'
  | 'success'
  | 'warning'
  | 'disabled-text'
  | 'text-inverted'
  | 'muted'
  | 'inactive';

const HeroIcon = createIconSet(
  glyphMap,
  'hero-icons-mobile',
  'hero-icons-mobile.ttf'
);

const COLOR_INTENTS = {
  text: 'text',
  primary: 'primary',
  secondary: 'secondary',
  info: 'info',
  danger: 'danger',
  success: 'success',
  warning: 'warning',
  'disabled-text': 'disabledText',
  'text-inverted': 'invertedText',
  muted: 'muted',
  inactive: 'inactive',
} as const;

const StyledHeroIcon = styled(HeroIcon)<{
  themeSize: ThemeSize;
  themeIntent: ThemeIntent;
}>(({ themeIntent, themeSize, theme }) => ({
  color: theme.__hd__.icon.colors[COLOR_INTENTS[themeIntent]],
  fontSize: theme.__hd__.icon.sizes[themeSize],
}));

export default StyledHeroIcon;