class RSVP extends Component {
  constructor(props) {
    super(props);

    this.state = {
      chosenParty: null,
      allParties: null,
      showConfirmation: false,
      isLoading: false,
      loadingPartiesErrorId: null
    };
  }

  componentDidMount() {
    this.loadParties();
  }

  goToHome = () => { /* Omitted */ };

  loadParties = () => { /* Omitted */ };

  getPartyWithGuestName = name => { /* Omitted */ };

  /**
   * Search for a party containing a guest with a matching name.
   */
  onNameFormSubmit = values => {
    const { name } = values;
    const foundParty = this.getPartyWithGuestName(name);

    const { partyNotFoundAlert } = this.state;
    if (!foundParty && !partyNotFoundAlert) {
      const notFoundAlert = alerts.showError(
        "We could not find your invite. Please check your spelling and try again.",
        { onClose: () => this.setState({ partyNotFoundAlert: null }) }
      );
      this.setState({ partyNotFoundAlert: notFoundAlert });
    } else if (foundParty && foundParty.hasResponded) {
      if (partyNotFoundAlert) {
        alerts.close(partyNotFoundAlert);
      }

      // Already RSVP'd, show confirmation
      this.setState({
        chosenParty: foundParty,
        showConfirmation: true,
        partyNotFoundAlert: null
      });
      alerts.showSuccess(
        "You have already responded. Please find your details below."
      );
    } else if (foundParty) {
      if (partyNotFoundAlert) {
        alerts.close(partyNotFoundAlert);
      }
      this.setState({ chosenParty: foundParty, partyNotFoundAlert: null });
    }
  };

  renderNameForm = () => {
    return (
      <NameForm onSubmit={this.onNameFormSubmit} onCancel={this.goToHome} />
    );
  };

  shouldRenderNameForm = () => {
    const { allParties, chosenParty, isLoading } = this.state;

    return allParties && allParties.length && !chosenParty && !isLoading;
  };

  shouldRenderGuestsForm = () => {
    const { chosenParty, showConfirmation, isLoading } = this.state;

    return !!chosenParty && !showConfirmation && !isLoading;
  };

  shouldRenderConfirmation = () => {
    const { showConfirmation, isLoading } = this.state;
    return showConfirmation && !isLoading;
  };

  onUpdateGuests = updatedGuests => {
    const { chosenParty } = this.state;
    const updatedParty = {
      ...chosenParty,
      guests: updatedGuests,
      hasResponded: true
    };

    this.setState({ isLoading: true });

    const partyRef = dbRef.ref(`parties/${updatedParty.id}`);
    partyRef.set(updatedParty, error => {
      if (error) {
        console.error(error);
        alerts.showError(
          "An error has occurred submitting your response. Please try again"
        );
      } else {
        this.setState({
          chosenParty: updatedParty,
          showConfirmation: true,
          isLoading: false
        });
      }
    });
  };

  renderGuestsForm = () => {
    const { chosenParty } = this.state;
    return (
      <GuestsForm
        guests={chosenParty.guests}
        updateGuests={this.onUpdateGuests}
        onCancel={this.goToHome}
      />
    );
  };

  renderConfirmationScreen() {
    const { chosenParty } = this.state;
    return (
      <Confirmation guests={chosenParty.guests} goToHome={this.goToHome} />
    );
  }

  render() {
    const { isLoading } = this.state;
    return (
      <PageWithNav>
        <Fragment>
          <AlertContainer
            template={AlertTemplate}
            closeButton={AlertCloseButton}
          />
          {isLoading && <LoadingIndicator />}
          {this.shouldRenderNameForm() && this.renderNameForm()}
          {this.shouldRenderGuestsForm() && this.renderGuestsForm()}
          {this.shouldRenderConfirmation() && this.renderConfirmationScreen()}
        </Fragment>
      </PageWithNav>
    );
  }
}