import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import styled, { css } from 'styled-components'

const width = '##WIDTH##'
const height = '##HEIGHT##'
const viewBox = '##VIEWBOX##'

const sizes = '##SIZES##'

const getDimensions = size => {
  if (size && typeof size.width === 'number' && typeof size.height === 'number') {
    return size
  }
  return size && sizes[size]
    ? sizes[size]
    : { width, height }
}

const getCss = (size, fillColor, fillColorRule) => {
  const dimensions = getDimensions(size)
  const fillRule = fillColor && fillColorRule ? `${fillColorRule}{ fill: ${fillColor}; }` : ''
  return css`
    width: ${dimensions.width}px;
    height: ${dimensions.height}px;
    ${fillRule}
  `
}

const Image = styled.svg`
  ${({noStyles, size, fillColor, fillColorRule}) => !noStyles
    ? getCss(size, fillColor, fillColorRule)
    : null
  }
`

const children = (
  <Fragment>
    ##SVG##
  </Fragment>
)

const defaultProps = {
  children,
  viewBox,
  fillColor: null,
  fillColorRule: '&&& path, &&& use, &&& g',
  sizes,
  size: null
}

const propTypes = {
  fillColor: PropTypes.string,
  fillColorRule: PropTypes.string,
  viewBox: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  size: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.shape({
      height: PropTypes.number.isRequired,
      width: PropTypes.number.isRequired
    })
  ]),
  sizes: (props, name, componentName) => {
    const prop = props[name]
    if (typeof prop !== 'object') { return }
    for (let key in prop) {
      if (!prop[key] || typeof prop[key].width !== 'number' || typeof prop[key].height !== 'number') {
        return new Error(
          'Invalid prop `' + name + '` supplied to' + ' `' + componentName + '`. Validation failed.'
        )
      }
    }
  }
}

export default Object.assign(Image, {
  getDimensions,
  getCss,
  defaultProps,
  propTypes,
  displayName: '##NAME##'
})

@@ -251,20 +251,29 @@
 sions = 
+(
 size
+, sizes)
  =%3E %7B%0A  
@@ -464,24 +464,31 @@
 Css = (size,
+ sizes,
  fillColor, 
@@ -500,22 +500,62 @@
 olorRule
-) =%3E %7B
+, noStyles) =%3E %7B%0A  if (noStyles) %7B return '' %7D
 %0A  const
@@ -586,16 +586,23 @@
 ons(size
+, sizes
 )%0A  cons
@@ -807,49 +807,42 @@
 nst 
-Image = styled.svg%60%0A  $%7B(%7BnoStyles,
+propsToCss = (%7B%0A  size,%0A 
  size
-,
+s,%0A 
  fil
@@ -840,32 +840,34 @@
 es,%0A  fillColor,
+%0A 
  fillColorRule%7D)
@@ -868,15 +868,12 @@
 Rule
-%7D) =%3E !
+,%0A  
 noSt
@@ -877,21 +877,21 @@
 oStyles%0A
-    ?
+%7D) =%3E
  getCss(
@@ -895,16 +895,23 @@
 ss(size,
+ sizes,
  fillCol
@@ -931,25 +931,59 @@
 Rule
-)%0A    : null%0A  %7D%0A
+, noStyles)%0A%0Aconst Image = styled.svg%60$%7BpropsToCss%7D
 %60%0A%0Ac

use prop sizes bugfix