import React, { Component } from 'react'
import FAQ from './FAQ'

import '../assets/sass/slider.sass'
import reactImg from '../assets/imgs/react.svg'
import codeImg from '../assets/imgs/code.svg'
import cubeImg from '../assets/imgs/cube.svg'
import Popout from './Popout'

class Slider extends Component {
  state = {
    content: [
      {
        actionable: 'SHOWEXAMPLES',
        heading: 'Rapid Prototyping & Ideation',
        img: cubeImg,
        copy: 'All projects have people they are supposed to serve. I quickly translate business requeriments into visual experinces that satisfy users on all their devices.'
      },
      {
        actionable: 'LINKTOGITHUB',
        heading: 'JavaScript Utilization',
        img: reactImg,
        copy: 'I love JavaScript...a lot! I can use it in lots of ways, but React/React Native are my frameworks of choice.'
      },
      {
        actionable: 'LINKTOEXAMPLES',
        heading: 'Execution & Delivery',
        img: codeImg,
        copy: "I've worked on some pretty big projects..."
      }
    ],
    popoutHidden: true,
    popoutData: null
  }

  openPopout = (clickedFAQ) => {
    this.props.toggleActionButton()
    this.setState({ popoutHidden: false, popoutData: clickedFAQ })
  }

  closePopout = () => {
    this.props.toggleActionButton()
    this.setState({ popoutHidden: true, popoutData: null })
  }

  render() {
    const FAQs = this.state.content.map((item, index) => {
      return <FAQ key={index} popoutDataBinding={this.state.popoutData} actionable={item.actionable} img={item.img} heading={item.heading} copy={item.copy} openPopout={(clickedFAQ) => this.openPopout(clickedFAQ)}/>
    })
    return(
      <div className='sliderContainer'>
        <div className='gradHolder'>
          {FAQs}
        </div>
        <div className={ this.state.popoutHidden ? 'popout hidden' : 'popout' }>
          <Popout actionable={ this.state.popoutData === null ? '' : this.state.popoutData.actionable } heading={ this.state.popoutData === null ? '' : this.state.popoutData.heading } copy={ this.state.popoutData === null ? '' : this.state.popoutData.copy }/>
      </div>
      <div onClick={this.closePopout} className={this.state.popoutHidden ? 'overlay hidden' : 'overlay'}></div>
      </div>
    )
  }
}

export default Slider

@@ -997,47 +997,53 @@
 y: %22
-I've worked on some pretty big projects
+Check out some of the projects I've worked on
 ...%22

add new text