import React from 'react'
import PropTypes from 'prop-types'
//import styled from 'styled-components'
import {Banner} from 'rebass'
import MultiLineText from '../MultiLineText'

/* styled-component extending is now working
const ExtenedBanner = styled(Banner).attrs({
  alignItems: props => props.alignItems || 'center',
  justifyContent: props => props.justifyContent || 'center',
  minHeight: props => props.minHeight || '100vh',
})`
  align-items:  ${props => props.alignItems}
  justify-content:  ${props => props.justifyContent}
  min-height:  ${props => props.minHeight}
`
*/

const getLocation = contentLoc => {
  let style = {}
  if (contentLoc === 'left') {
    style = {
      alignItems: 'flex-start',
    }
  } else if (contentLoc === 'right') {
    style = {
      alignItems: 'flex-end',
    }
  }
  return style
}

/** Hero */
function Hero({
  backgroundImage,
  contentPx,
  contentLoc,
  title: {titleSizes, titleText},
  description: {descriptionSizes, descriptionText},
}) {
  return (
    <Banner
      style={{...getLocation(contentLoc), minHeight: '100vh'}}
      backgroundImage={backgroundImage}
      px={contentPx}>
      <MultiLineText f={titleSizes} multiLineText={titleText} />
      <MultiLineText f={descriptionSizes} multiLineText={descriptionText} />
    </Banner>
  )
}

Hero.propTypes = {
  /** Background Image */
  backgroundImage: PropTypes.string,

  /** padding x axis in array */
  contentPx: PropTypes.array,

  /** content location */
  contentLoc: PropTypes.string,

  /** Title */
  title: PropTypes.shape({
    /** title size in array */
    titleSizes: PropTypes.array,
    /** text of title */
    titleText: PropTypes.string,
  }),

  /** Description */
  description: PropTypes.shape({
    /** text size in array */
    descriptionSizes: PropTypes.array,
    /** text of description */
    descriptionText: PropTypes.string,
  }),
}

Hero.defaultProps = {
  contentLoc: 'center',
  contentPx: [1, 3, 4, 4],
  title: {
    titleSizes: [4, 5, 6, 7],
    titleText: 'hello',
  },
  description: {
    descriptionSizes: [2, 2, 3, 3],
    descriptionText: 'world',
  },
}

export default Hero

@@ -928,16 +928,28 @@
 itleText
+, titleColor
 %7D,%0A  des
@@ -992,16 +992,34 @@
 tionText
+, descriptionColor
 %7D,%0A%7D) %7B%0A
@@ -1223,24 +1223,43 @@
 =%7BtitleText%7D
+ color=%7BtitleColor%7D
  /%3E%0A      %3CM
@@ -1266,24 +1266,32 @@
 ultiLineText
+%0A       
  f=%7Bdescript
@@ -1295,24 +1295,32 @@
 iptionSizes%7D
+%0A       
  multiLineTe
@@ -1339,16 +1339,55 @@
 ionText%7D
+%0A        color=%7BdescriptionColor%7D%0A     
  /%3E%0A    
@@ -1769,24 +1769,84 @@
 pes.string,%0A
+    /** color of title */%0A    titleColor: PropTypes.string,%0A
   %7D),%0A%0A  /**
@@ -2029,24 +2029,96 @@
 pes.string,%0A
+    /** color of description */%0A    descriptionColor: PropTypes.string,%0A
   %7D),%0A%7D%0A%0AHer
@@ -2252,16 +2252,41 @@
 hello',%0A
+    tilteColor: 'black',%0A
   %7D,%0A  d
@@ -2335,16 +2335,16 @@
  3, 3%5D,%0A
-
     desc
@@ -2365,16 +2365,47 @@
 world',%0A
+    descriptionColor: 'black',%0A
   %7D,%0A%7D%0A%0A

add color to hero