export class CreateActionCard extends React.Component {
  state = {
    isCreating: this.props.creating || false,
  };

  handleWrapperClick = () => {
    this.setState({
      isCreating: true,
    });
  };

  handleCancelButtonClick = () => {
    this.setState({
      isCreating: false,
    });
  };

  handleSaveButtonClick = (person) => {
    this.props.onSaveButtonClick(person);

    this.setState({
      isCreating: false,
    });
  };

  render() {
    const title = 'Action title';
    const date = '12.05.2018';
    const description = 'Music fan. Alcohol enthusiast. Creator. Devoted social media geek. Total analyst. Coffee lover. Beer junkie. Coffee maven. Avid alcohol lover. Twitter expert. Lifelong tv ninja. Creator. Passionate tv nerd. Problem solver. Proud alcohol evangelist. Lifelong web junkie. Coffee maven. Unapologetic social media advocate. Analyst. Tv trailblazer. Zombie geek. Twitter aficionado. Reader.';

    console.log(this.props.creating)

    return (
      <React.Fragment>
        {
          !this.state.isCreating ?
            <Wrapper className={ this.props.className } onClick={ this.handleWrapperClick }>
              <Icon icon={ plus }/>
            </Wrapper>
            :
            <ActionCard
              title={ title }
              date={ date }
              description={ description }
              karma={ 'neutral' }
              create
              onCancelButtonClick={ this.handleCancelButtonClick }
              onSaveButtonClick={ this.handleSaveButtonClick }
            />
        }
      </React.Fragment>
    );
  }
}