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,
  bold,
  title: {titleSizes, titleText, titleColor},
  description: {descriptionSizes, descriptionText, descriptionColor},
}) {
  return (
    <Banner
      style={{...getLocation(contentLoc), minHeight: '100vh'}}
      backgroundImage={backgroundImage}
      px={contentPx}>
      <MultiLineText bold={bold} f={titleSizes} multiLineText={titleText} color={titleColor} />
      <MultiLineText
        bold={bold}
        f={descriptionSizes}
        multiLineText={descriptionText}
        color={descriptionColor}
      />
    </Banner>
  )
}

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

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

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

  /** bold for title and description */
  bold: PropTypes.bool,

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

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

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

export default Hero

@@ -901,16 +901,8 @@
 oc,%0A
-  bold,%0A
   ti
@@ -940,16 +940,36 @@
 tleColor
+, titleBold, titlePy
 %7D,%0A  des
@@ -979,16 +979,21 @@
 ption: %7B
+%0A    
 descript
@@ -1001,16 +1001,20 @@
 onSizes,
+%0A   
  descrip
@@ -1022,16 +1022,20 @@
 ionText,
+%0A   
  descrip
@@ -1043,16 +1043,60 @@
 ionColor
+,%0A    descriptionBold,%0A    descriptionPy,%0A  
 %7D,%0A%7D) %7B%0A
@@ -1263,28 +1263,49 @@
 LineText
- bold=%7Bbold%7D
+%0A        bold=%7BtitleBold%7D%0A       
  f=%7Btitl
@@ -1311,16 +1311,24 @@
 leSizes%7D
+%0A       
  multiLi
@@ -1345,16 +1345,24 @@
 tleText%7D
+%0A       
  color=%7B
@@ -1372,16 +1372,43 @@
 leColor%7D
+%0A        py=%7BtiltePy%7D%0A     
  /%3E%0A    
@@ -1438,17 +1438,28 @@
   bold=%7B
-b
+descriptionB
 old%7D%0A   
@@ -1553,24 +1553,51 @@
 ptionColor%7D%0A
+        py=%7BdescriptionPy%7D%0A
       /%3E%0A   
@@ -1824,73 +1824,8 @@
 g,%0A%0A
-  /** bold for title and description */%0A  bold: PropTypes.bool,%0A%0A
   /*
@@ -2040,24 +2040,135 @@
 pes.string,%0A
+    /** bold for title */%0A    titleBold: PropTypes.bool,%0A    /** py for title */%0A    titlePy: PropTypes.array,%0A
   %7D),%0A%0A  /**
@@ -2427,16 +2427,151 @@
 string,%0A
+    /** bold for description */%0A    descriptionBold: PropTypes.bool,%0A    /** py for description */%0A    descriptionPy: PropTypes.array,%0A
   %7D),%0A%7D%0A
@@ -2648,22 +2648,8 @@
 4%5D,%0A
-  bold: true,%0A
   ti
@@ -2730,24 +2730,72 @@
 r: 'black',%0A
+    titleBold: true,%0A    titlePy: %5B3, 4, 5, 6%5D,%0A
   %7D,%0A  descr
@@ -2901,16 +2901,76 @@
 black',%0A
+    descriptionBold: true,%0A    descriptionPy: %5B3, 4, 5, 6%5D,%0A
   %7D,%0A%7D%0A%0A

add py and seperate bold