import * as React from "react";
import { Icon, Loader, Message } from "semantic-ui-react";

export enum FeedbackMessageStatus {
  HIDDEN,
  LOADING,
  COMPLETE,
  SUBMIT_ERROR,
  FEEDBACK_REQUIRED_ERROR
}
interface IFeedbackMessageProps {
  status: FeedbackMessageStatus;
}
export class FeedbackMessage extends React.Component<IFeedbackMessageProps> {
  render() {
    const color = this.getColor();
    const header = this.getHeader();
    const content = this.getContent();
    return (
      <>
        {this.props.status !== FeedbackMessageStatus.HIDDEN && (
          <Message color={color}>
            <Message.Header style={{
              marginBottom: this.props.status === FeedbackMessageStatus.LOADING ? "5px" : 0
            }}>
              <Loader size="small" active={this.props.status === FeedbackMessageStatus.LOADING} inline style={{
                marginRight: "10px"
              }}/>
              {header}
            </Message.Header>
            <Message.Content>
              {content}
            </Message.Content>
          </Message>
        )}
      </>
    );
  }
  private getColor = () => {
    switch (this.props.status) {
      case FeedbackMessageStatus.LOADING:
        return "grey";
      case FeedbackMessageStatus.COMPLETE:
        return "green";
      case FeedbackMessageStatus.SUBMIT_ERROR:
      case FeedbackMessageStatus.FEEDBACK_REQUIRED_ERROR:
        return "red";
    }
  };
  private getHeader = () => {
    switch (this.props.status) {
      case FeedbackMessageStatus.LOADING:
        return <span style={{verticalAlign: "bottom"}}>Loading</span>;
      case FeedbackMessageStatus.COMPLETE:
        return <span>Submitted Successfully</span>;
      case FeedbackMessageStatus.SUBMIT_ERROR:
        return <span>Something Went Wrong"</span>;
      case FeedbackMessageStatus.FEEDBACK_REQUIRED_ERROR:
        return <span>Feedback Required</span>;
    }
  };
  private getContent = () => {
    switch (this.props.status) {
      case FeedbackMessageStatus.LOADING:
        return <p>Please wait for a few seconds.</p>;
      case FeedbackMessageStatus.COMPLETE:
        return <p>Thanks! We will try to improve it ASAP.</p>;
      case FeedbackMessageStatus.SUBMIT_ERROR:
        return <p>You can try again later, or contact me via email instead: <a href="mailto:mycityofsky@gmail.com">mycityofsky@gmail.com</a></p>;
      case FeedbackMessageStatus.FEEDBACK_REQUIRED_ERROR:
        return <p>Please input your feedback before submitting.</p>;
    }
  }
}
