import React, { Component } from "react";
import {
  withStyles,
  CircularProgress,
  Typography,
  Paper
} from "@material-ui/core";
import { styles } from "./PageLayout.styles";
import Post from "../components/Post";
import { Status } from "../types/Status";
import { Context } from "../types/Context";
import Mastodon from "megalodon";
import { withSnackbar } from "notistack";

interface IConversationPageState {
  posts?: [Status];
  viewIsLoading: boolean;
  viewDidLoad?: boolean;
  viewDidError?: boolean;
  viewDidErrorCode?: any;
  conversationId: string;
}

class Conversation extends Component<any, IConversationPageState> {
  client: Mastodon;
  streamListener: any;

  constructor(props: any) {
    super(props);

    this.state = {
      viewIsLoading: true,
      conversationId: props.match.params.conversationId
    };

    this.client = new Mastodon(
      localStorage.getItem("access_token") as string,
      (localStorage.getItem("baseurl") as string) + "/api/v1"
    );
  }

  getContext() {
    this.client
      .get(`/statuses/${this.state.conversationId}`)
      .then((resp: any) => {
        let result: Status = resp.data;
        this.setState({ posts: [result] });
      })
      .catch((err: Error) => {
        this.setState({
          viewIsLoading: false,
          viewDidError: true,
          viewDidErrorCode: err.message
        });
        this.props.enqueueSnackbar("Couldn't get conversation: " + err.name, {
          variant: "error"
        });
      });
    this.client
      .get(`/statuses/${this.state.conversationId}/context`)
      .then((resp: any) => {
        let context: Context = resp.data;
        let posts = this.state.posts;
        let array: any[] = [];
        if (posts) {
          array = array
            .concat(context.ancestors)
            .concat(posts)
            .concat(context.descendants);
        }
        this.setState({
          posts: array as [Status],
          viewIsLoading: false,
          viewDidLoad: true,
          viewDidError: false
        });
      })
      .catch((err: Error) => {
        this.setState({
          viewIsLoading: false,
          viewDidError: true,
          viewDidErrorCode: err.message
        });
        this.props.enqueueSnackbar("Couldn't get conversation: " + err.name, {
          variant: "error"
        });
      });
  }

  componentWillReceiveProps(props: any) {
    if (props.match.params.conversationId !== this.state.conversationId) {
      this.getContext();
    }
  }

  componentWillMount() {
    this.getContext();
  }

  componentDidUpdate() {
    const where: HTMLElement | null = document.getElementById(
      `post_${this.state.conversationId}`
    );
    if (
      where &&
      this.state.posts &&
      this.state.posts[0].id !== this.state.conversationId
    ) {
      window.scrollTo(0, where.getBoundingClientRect().top);
    }
  }

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.pageLayoutMaxConstraints}>
        {this.state.posts ? (
          <div>
            {this.state.posts.map((post: Status) => {
              return <Post key={post.id} post={post} client={this.client} />;
            })}
          </div>
        ) : (
          <span />
        )}
        {this.state.viewDidError ? (
          <Paper className={classes.errorCard}>
            <Typography variant="h4">Bummer.</Typography>
            <Typography variant="h6">
              Something went wrong when loading this conversation.
            </Typography>
            <Typography>
              {this.state.viewDidErrorCode ? this.state.viewDidErrorCode : ""}
            </Typography>
          </Paper>
        ) : (
          <span />
        )}
        {this.state.viewIsLoading ? (
          <div style={{ textAlign: "center" }}>
            <CircularProgress className={classes.progress} color="primary" />
          </div>
        ) : (
          <span />
        )}
      </div>
    );
  }
}

export default withStyles(styles)(withSnackbar(Conversation));