import React, { Component } from "react"
import { Image, View } from "react-native"
import PropTypes from "prop-types"

const images = {
  logout: require("./images/logout.png"),
  glasses: require("./images/ar-glasses.png"),
  back: require("./images/back.png"),
  hand: require("./images/hand.png"),
  center: require("./images/center.png"),
  cancel: require("./images/cancel.png"),
  rightArrow: require("./images/right-arrow.png"),
  search: require("./images/search.png"),
  settings: require("./images/settings.png"),
  add: require("./images/add.png"),
  done: require("./images/done.png"),
  target: require("./images/target.png"),
  pin: require("./images/pin.png"),
  hardhat: require("./images/hardhat.png"),
  clipboard: require("./images/clipboard.png"),
  question: require("./images/question.png"),
}

export class Icon extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    size: PropTypes.number,
    margin: PropTypes.number,
    style: PropTypes.object,
  }

  static defaultProps = {
    size: 50,
    margin: 0,
  }

  render() {
    let { name, margin, style } = this.props
    let size = this.props.size - margin * 2
    let source = images[name]

    if (!source) {
      return <View style={{ width: size, height: size, margin }} />
    } else {
      return (
        <Image
          style={[{ width: size, height: size, margin }, style]}
          source={source}
          resizeMode="stretch"
        />
      )
    }
  }
}