// @flow
import React, { type Node, PureComponent } from 'react'
import { css } from 'react-emotion'
import { UnmountClosed } from 'react-collapse'
import Box from '../../elements/Box'
import FormHeading from '../../elements/FormHeading'
import Grid from '../../elements/Grid'
import Icons from '../../elements/Icons'

type Props = {
  text: string,
  openByDefault?: boolean,
  render: () => Node,
}

type State = {
  showRenderProps: boolean,
}

class CollapsableFormHeading extends PureComponent<Props, State> {
  static defaultProps = {
    openByDefault: false,
  }

  state = {
    showRenderProps: false,
  }

  componentWillMount() {
    const { openByDefault } = this.props
    if (openByDefault === true) {
      this.setState(() => ({ showRenderProps: true }))
    }
  }

  toggleShowRenderProps = () => {
    this.setState(state => ({ showRenderProps: !state.showRenderProps }))
  }

  render() {
    const { showRenderProps } = this.state
    const { text, render } = this.props
    return (
      <Box mb={10}>
        <FormHeading className={css`cursor: pointer`} mb={4} data-test-id="form-heading" onClick={this.toggleShowRenderProps}>
          <Grid gridTemplateColumns="13px 1fr" gridGap={2} alignItems="center">
            <Icons
              mb="2px"
              color="#1B8D97"
              type="PlusToggle"
              className={showRenderProps === true ? 'isOpen' : null}
            />
            {text}
          </Grid>
        </FormHeading>
        <UnmountClosed isOpened={showRenderProps}>
          { render() }
        </UnmountClosed>
      </Box>
    )
  }
}

export default CollapsableFormHeading