import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
// todo
import { color as themeColor } from '../../theme';

import { iconPresets, iconStyles } from './icon.presets';
import { IconProps } from './icon.props';
import { PaackIcon } from './PaackIcon';

/**
 * Wrapper around a third party icon library
 *
 * @param name Name of the icon.
 * @param onPress Optional callback function when the icon is pressed.
 * @param preset Color presets.
 * @param size Size of the icon.
 * @param style Optional style overrides for the icon container.
 */
export function Icon(props: IconProps) {
  const { name, onPress, preset, size, style, ...rest } = props;
  const color = preset ? iconPresets[preset] : props.color;
  const Icon = (
    <View style={[iconStyles.container, style]}>
      <PaackIcon {...{ name }} {...{ size }} {...{ color }} {...rest} />
    </View>
  );

  return onPress ? <TouchableOpacity onPress={onPress}>{Icon}</TouchableOpacity> : Icon;
}

Icon.defaultProps = {
  color: themeColor.palette.black,
};
