import React, { Component } from "react";
import {
    List,
    ListItem,
    ListItemText,
    ListSubheader,
    ListItemSecondaryAction,
    ListItemAvatar,
    Paper,
    withStyles,
    Typography,
    CircularProgress,
    Tooltip,
    IconButton
} from "@material-ui/core";

import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
import PersonAddIcon from "@material-ui/icons/PersonAdd";
import { styles } from "./PageLayout.styles";
import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
import Mastodon from "megalodon";
import { parse as parseParams } from "query-string";
import { Results } from "../types/Search";
import { withSnackbar } from "notistack";
import Post from "../components/Post";
import { Status } from "../types/Status";
import { Account } from "../types/Account";
import Masonry from "react-masonry-css";
import { getUserDefaultBool } from "../utilities/settings";

interface ISearchPageState {
    query: string[] | string;
    type?: string[] | string;
    results?: Results;
    tagResults?: [Status];
    viewIsLoading: boolean;
    viewDidLoad?: boolean;
    viewDidError?: boolean;
    viewDidErrorCode?: string;
    isMasonryLayout: boolean;
}

class SearchPage extends Component<any, ISearchPageState> {
    client: Mastodon;

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

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

        let searchParams = this.getQueryAndType(props);

        this.state = {
            viewIsLoading: true,
            query: searchParams.query,
            type: searchParams.type,
            isMasonryLayout: getUserDefaultBool("isMasonryLayout")
        };

        if (searchParams.type === "tag") {
            this.searchForPostsWithTags(searchParams.query);
        } else {
            this.searchQuery(searchParams.query);
        }
    }

    componentWillReceiveProps(props: any) {
        this.setState({
            viewDidLoad: false,
            viewIsLoading: true,
            viewDidError: false,
            viewDidErrorCode: "",
            results: undefined
        });
        let searchParams = this.getQueryAndType(props);
        this.setState({ query: searchParams.query, type: searchParams.type });
        if (searchParams.type === "tag") {
            this.searchForPostsWithTags(searchParams.query);
        } else {
            this.searchQuery(searchParams.query);
        }
    }

    getQueryAndType(props: any) {
        const { search }: { search: string } = props.location;
        let newSearch = parseParams(search);
        let query: string | string[] = "";
        let type;

        if (newSearch.query) {
            if (search.includes("tag:")) {
                type = "tag";
            }
            query = newSearch.query.toString().replace("tag:", "");
        }

        if (newSearch.type && newSearch.type !== undefined) {
            type = newSearch.type;
        }

        return {
            query: query,
            type: type
        };
    }

    searchQuery(query: string | string[]) {
        this.client
            .get("/search", { q: query })
            .then((resp: any) => {
                let results: Results = resp.data;
                this.setState({
                    results,
                    viewDidLoad: true,
                    viewIsLoading: false
                });
            })
            .catch((err: Error) => {
                this.setState({
                    viewIsLoading: false,
                    viewDidError: true,
                    viewDidErrorCode: err.message
                });

                this.props.enqueueSnackbar(
                    `Couldn't search for ${this.state.query}: ${err.name}`,
                    { variant: "error" }
                );
            });
    }

    searchForPostsWithTags(query: string | string[]) {
        let client = new Mastodon(
            localStorage.getItem("access_token") as string,
            localStorage.getItem("baseurl") + "/api/v1"
        );
        client
            .get(`/timelines/tag/${query}`)
            .then((resp: any) => {
                let tagResults: [Status] = resp.data;
                this.setState({
                    tagResults,
                    viewDidLoad: true
                });
            })
            .catch((err: Error) => {
                this.setState({
                    viewDidError: true,
                    viewDidErrorCode: err.message
                });

                this.props.enqueueSnackbar(
                    `Couldn't search for posts with tag ${this.state.query}: ${err.name}`,
                    { variant: "error" }
                );
            })
            .finally(() => {
                this.setState({ viewIsLoading: false });
            });
    }

    followMemberFromQuery(acct: Account) {
        let client = new Mastodon(
            localStorage.getItem("access_token") as string,
            localStorage.getItem("baseurl") + "/api/v1"
        );
        client
            .post(`/accounts/${acct.id}/follow`)
            .then((resp: any) => {
                this.props.enqueueSnackbar(
                    "You are now following this account."
                );
            })
            .catch((err: Error) => {
                this.props.enqueueSnackbar(
                    "Couldn't follow account: " + err.name,
                    { variant: "error" }
                );
                console.error(err.message);
            });
    }

    showAllAccountsFromQuery() {
        const { classes } = this.props;
        return (
            <div className={classes.pageLayoutConstraints}>
                <ListSubheader>Accounts</ListSubheader>

                {this.state.results &&
                this.state.results.accounts.length > 0 ? (
                    <Paper className={classes.pageListConstraints}>
                        <List>
                            {this.state.results.accounts.map(
                                (acct: Account) => {
                                    return (
                                        <ListItem key={acct.id}>
                                            <ListItemAvatar>
                                                <LinkableAvatar
                                                    to={`/profile/${acct.id}`}
                                                    alt={acct.username}
                                                    src={acct.avatar_static}
                                                />
                                            </ListItemAvatar>
                                            <ListItemText
                                                primary={
                                                    acct.display_name ||
                                                    acct.acct
                                                }
                                                secondary={acct.acct}
                                            />
                                            <ListItemSecondaryAction>
                                                <Tooltip title="View profile">
                                                    <LinkableIconButton
                                                        to={`/profile/${acct.id}`}
                                                    >
                                                        <AssignmentIndIcon />
                                                    </LinkableIconButton>
                                                </Tooltip>
                                                <Tooltip title="Follow">
                                                    <IconButton
                                                        onClick={() =>
                                                            this.followMemberFromQuery(
                                                                acct
                                                            )
                                                        }
                                                    >
                                                        <PersonAddIcon />
                                                    </IconButton>
                                                </Tooltip>
                                            </ListItemSecondaryAction>
                                        </ListItem>
                                    );
                                }
                            )}
                        </List>
                    </Paper>
                ) : (
                    <Typography
                        variant="caption"
                        className={classes.pageLayoutEmptyTextConstraints}
                    >
                        No results found
                    </Typography>
                )}

                <br />
            </div>
        );
    }

    renderPosts(posts: Status[]) {
        const { classes } = this.props;
        const postComponents = posts.map((post: Status) => {
            return <Post key={post.id} post={post} client={this.client} />;
        });
        if (this.state.isMasonryLayout) {
            return (
                <Masonry
                    className={classes.masonryGrid}
                    columnClassName={classes["my-masonry-grid_column"]}
                    breakpointCols={{
                        default: 4,
                        2000: 3,
                        1400: 2,
                        1050: 1
                    }}
                >
                    {postComponents}
                </Masonry>
            );
        } else {
            return <div>{postComponents}</div>;
        }
    }

    showAllPostsFromQuery() {
        const { classes } = this.props;
        const containerClasses = `${classes.pageLayoutConstraints} ${
            this.state.isMasonryLayout
                ? classes.pageLayoutMasonry + " " + classes.noTopPaddingMargin
                : ""
        }`;
        return (
            <div className={containerClasses}>
                <ListSubheader>Posts</ListSubheader>
                {this.state.results ? (
                    this.state.results.statuses.length > 0 ? (
                        this.renderPosts(this.state.results.statuses)
                    ) : (
                        <Typography
                            variant="caption"
                            className={classes.pageLayoutEmptyTextConstraints}
                        >
                            No results found.
                        </Typography>
                    )
                ) : null}
            </div>
        );
    }

    showAllPostsWithTag() {
        const { classes } = this.props;
        const containerClasses = `${classes.pageLayoutMaxConstraints} ${
            this.state.isMasonryLayout ? classes.pageLayoutMasonry : ""
        }`;
        return (
            <div className={containerClasses}>
                <ListSubheader>Tagged posts</ListSubheader>
                {this.state.tagResults ? (
                    this.state.tagResults.length > 0 ? (
                        this.renderPosts(this.state.tagResults)
                    ) : (
                        <Typography
                            variant="caption"
                            className={classes.pageLayoutEmptyTextConstraints}
                        >
                            No results found.
                        </Typography>
                    )
                ) : null}
            </div>
        );
    }

    render() {
        const { classes } = this.props;
        return (
            <div>
                {this.state.type && this.state.type === "tag" ? (
                    this.showAllPostsWithTag()
                ) : (
                    <div>
                        {this.showAllAccountsFromQuery()}
                        {this.showAllPostsFromQuery()}
                    </div>
                )}
                {this.state.viewDidError ? (
                    <Paper className={classes.errorCard}>
                        <Typography variant="h4">Bummer.</Typography>
                        <Typography variant="h6">
                            Something went wrong when loading this timeline.
                        </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(SearchPage));