interface State {
  leftButtonVisible: boolean,
  rightButtonVisible: boolean,
}

class ButtonsContainer extends React.PureComponent<{}, State> {

  public state: State = {
    leftButtonVisible: true,
    rightButtonVisible: false,
  };

  public updateVisibleButton = () => {
   this.setState({
     leftButtonVisible: !this.state.leftButtonVisible,
     rightButtonVisible: !this.state.rightButtonVisible,
   })
  }

  public render() {
    return (
      <Container>
        <Button
          data-testid="switchButton"
          onClick={this.updateVisibleButton}
          type={ButtonType.DEFAULT}
        >
          Switch visible Value
        </Button>

        <ButtonsWrapper>
          <div style={{ flex: 1 }}>
            {this.state.leftButtonVisible &&
              <Button data-testid="leftButton" type={ButtonType.PRIMARY}>
                Left visible!
              </Button>
            }
          </div>

          <div style={{ flex: 1 }}>
            {this.state.rightButtonVisible &&
              <Button data-testid="rightButton" type={ButtonType.DANGER}>
                Right visible!
              </Button>
            }
          </div>
        </ButtonsWrapper>
      </Container>
    );
  }
}