import React, { Component } from "react";
import {
    Typography,
    AppBar,
    Toolbar,
    IconButton,
    InputBase,
    Avatar,
    ListItemText,
    Divider,
    List,
    ListItemIcon,
    Hidden,
    Drawer,
    ListSubheader,
    ListItemAvatar,
    withStyles,
    Menu,
    MenuItem,
    ClickAwayListener,
    Badge,
    Dialog,
    DialogTitle,
    DialogContent,
    DialogContentText,
    DialogActions,
    Button,
    ListItem,
    Tooltip
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import SearchIcon from "@material-ui/icons/Search";
import NotificationsIcon from "@material-ui/icons/Notifications";
import MailIcon from "@material-ui/icons/Mail";
import HomeIcon from "@material-ui/icons/Home";
import DomainIcon from "@material-ui/icons/Domain";
import PublicIcon from "@material-ui/icons/Public";
import GroupIcon from "@material-ui/icons/Group";
import SettingsIcon from "@material-ui/icons/Settings";
import InfoIcon from "@material-ui/icons/Info";
import CreateIcon from "@material-ui/icons/Create";
//import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
import { styles } from "./AppLayout.styles";
import { UAccount } from "../../types/Account";
import {
    LinkableListItem,
    LinkableIconButton,
    LinkableFab
} from "../../interfaces/overrides";
import Mastodon from "megalodon";
import { Notification } from "../../types/Notification";
import { sendNotificationRequest } from "../../utilities/notifications";
import { withSnackbar } from "notistack";
import { getConfig, getUserDefaultBool } from "../../utilities/settings";
import { isDesktopApp, isDarwinApp } from "../../utilities/desktop";
import { Config } from "../../types/Config";

interface IAppLayoutState {
    acctMenuOpen: boolean;
    drawerOpenOnMobile: boolean;
    currentUser?: UAccount;
    notificationCount: number;
    logOutOpen: boolean;
    enableFederation?: boolean;
    brandName?: string;
    developerMode?: boolean;
}

export class AppLayout extends Component<any, IAppLayoutState> {
    client: Mastodon;
    streamListener: any;

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

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

        this.state = {
            drawerOpenOnMobile: false,
            acctMenuOpen: false,
            notificationCount: 0,
            logOutOpen: false
        };

        this.toggleDrawerOnMobile = this.toggleDrawerOnMobile.bind(this);
        this.toggleAcctMenu = this.toggleAcctMenu.bind(this);
        this.clearBadge = this.clearBadge.bind(this);
    }

    componentDidMount() {
        let acct = localStorage.getItem("account");
        if (acct) {
            this.setState({ currentUser: JSON.parse(acct) });
        } else {
            this.client
                .get("/accounts/verify_credentials")
                .then((resp: any) => {
                    let data: UAccount = resp.data;
                    this.setState({ currentUser: data });
                })
                .catch((err: Error) => {
                    this.props.enqueueSnackbar(
                        "Couldn't find profile info: " + err.name
                    );
                    console.error(err.message);
                });
        }

        getConfig().then((result: any) => {
            if (result !== undefined) {
                let config: Config = result;
                this.setState({
                    enableFederation: config.federation.enablePublicTimeline,
                    brandName: config.branding
                        ? config.branding.name
                        : "Hyperspace",
                    developerMode: config.developer
                });
            }
        });

        this.streamNotifications();
    }

    streamNotifications() {
        this.streamListener = this.client.stream("/streaming/user");

        if (getUserDefaultBool("displayAllOnNotificationBadge")) {
            this.client.get("/notifications").then((resp: any) => {
                let notifArray = resp.data;
                this.setState({ notificationCount: notifArray.length });
            });
        }

        this.streamListener.on("notification", (notif: Notification) => {
            const notificationCount = this.state.notificationCount + 1;
            this.setState({ notificationCount });
            if (!document.hasFocus()) {
                let primaryMessage = "";
                let secondaryMessage = "";

                switch (notif.type) {
                    case "favourite":
                        primaryMessage =
                            (notif.account.display_name ||
                                "@" + notif.account.username) +
                            " favorited your post.";
                        if (notif.status) {
                            const div = document.createElement("div");
                            div.innerHTML = notif.status.content;
                            secondaryMessage =
                                (div.textContent || div.innerText || "").slice(
                                    0,
                                    100
                                ) + "...";
                        }
                        break;
                    case "follow":
                        primaryMessage =
                            (notif.account.display_name ||
                                "@" + notif.account.username) +
                            " is now following you.";
                        break;
                    case "mention":
                        primaryMessage =
                            (notif.account.display_name ||
                                "@" + notif.account.username) +
                            " mentioned you in a post.";
                        if (notif.status) {
                            const div = document.createElement("div");
                            div.innerHTML = notif.status.content;
                            secondaryMessage =
                                (div.textContent || div.innerText || "").slice(
                                    0,
                                    100
                                ) + "...";
                        }
                        break;
                    case "reblog":
                        primaryMessage =
                            (notif.account.display_name ||
                                "@" + notif.account.username) +
                            " reblogged your post.";
                        if (notif.status) {
                            const div = document.createElement("div");
                            div.innerHTML = notif.status.content;
                            secondaryMessage =
                                (div.textContent || div.innerText || "").slice(
                                    0,
                                    100
                                ) + "...";
                        }
                        break;
                }

                sendNotificationRequest(primaryMessage, secondaryMessage);
            }
        });
    }

    toggleAcctMenu() {
        this.setState({ acctMenuOpen: !this.state.acctMenuOpen });
    }

    toggleDrawerOnMobile() {
        this.setState({
            drawerOpenOnMobile: !this.state.drawerOpenOnMobile
        });
    }

    toggleLogOutDialog() {
        this.setState({ logOutOpen: !this.state.logOutOpen });
    }

    searchForQuery(what: string) {
        window.location.href = isDesktopApp()
            ? "hyperspace://hyperspace/app/index.html#/search?query=" + what
            : "/#/search?query=" + what;
        window.location.reload;
    }

    logOutAndRestart() {
        let loginData = localStorage.getItem("login");
        if (loginData) {
            let items = ["login", "account", "baseurl", "access_token"];
            items.forEach(entry => {
                localStorage.removeItem(entry);
            });
            window.location.reload();
        }
    }

    clearBadge() {
        if (!getUserDefaultBool("displayAllOnNotificationBadge")) {
            this.setState({ notificationCount: 0 });
        }
    }

    titlebar() {
        const { classes } = this.props;
        if (isDarwinApp()) {
            return (
                <div className={classes.titleBarRoot}>
                    <Typography className={classes.titleBarText}>
                        {this.state.brandName
                            ? this.state.brandName
                            : "Hyperspace"}{" "}
                        {this.state.developerMode ? "(beta)" : null}
                    </Typography>
                </div>
            );
        } else if (
            this.state.developerMode ||
            process.env.NODE_ENV === "development"
        ) {
            return (
                <div className={classes.titleBarRoot}>
                    <Typography className={classes.titleBarText}>
                        Careful: you're running in developer mode.
                    </Typography>
                </div>
            );
        }
    }

    appDrawer() {
        const { classes } = this.props;
        return (
            <div>
                <List>
                    <div className={classes.drawerDisplayMobile}>
                        <LinkableListItem
                            button
                            key="profile-mobile"
                            to={`/profile/${
                                this.state.currentUser
                                    ? this.state.currentUser.id
                                    : "1"
                            }`}
                        >
                            <ListItemAvatar>
                                <Avatar
                                    alt="You"
                                    src={
                                        this.state.currentUser
                                            ? this.state.currentUser
                                                  .avatar_static
                                            : ""
                                    }
                                />
                            </ListItemAvatar>
                            <ListItemText
                                primary={
                                    this.state.currentUser
                                        ? this.state.currentUser.display_name ||
                                          this.state.currentUser.acct
                                        : "Loading..."
                                }
                                secondary={
                                    this.state.currentUser
                                        ? this.state.currentUser.acct
                                        : "Loading..."
                                }
                            />
                        </LinkableListItem>
                        {/* <LinkableListItem button key="acctSwitch-module" to="/switchacct">
                    <ListItemIcon><SupervisedUserCircleIcon/></ListItemIcon>
                    <ListItemText primary="Switch account"/>
                  </LinkableListItem> */}
                        <ListItem
                            button
                            key="acctLogout-mobile"
                            onClick={() => this.toggleLogOutDialog()}
                        >
                            <ListItemIcon>
                                <ExitToAppIcon />
                            </ListItemIcon>
                            <ListItemText primary="Log out" />
                        </ListItem>
                        <Divider />
                    </div>
                    <ListSubheader>Timelines</ListSubheader>
                    <LinkableListItem button key="home" to="/home">
                        <ListItemIcon>
                            <HomeIcon />
                        </ListItemIcon>
                        <ListItemText primary="Home" />
                    </LinkableListItem>
                    <LinkableListItem button key="local" to="/local">
                        <ListItemIcon>
                            <DomainIcon />
                        </ListItemIcon>
                        <ListItemText primary="Local" />
                    </LinkableListItem>
                    {this.state.enableFederation ? (
                        <LinkableListItem button key="public" to="/public">
                            <ListItemIcon>
                                <PublicIcon />
                            </ListItemIcon>
                            <ListItemText primary="Public" />
                        </LinkableListItem>
                    ) : (
                        <ListItem disabled>
                            <ListItemIcon>
                                <PublicIcon />
                            </ListItemIcon>
                            <ListItemText
                                primary="Public"
                                secondary="Disabled by admin"
                            />
                        </ListItem>
                    )}
                    <Divider />
                    <div className={classes.drawerDisplayMobile}>
                        <ListSubheader>Account</ListSubheader>
                        <LinkableListItem
                            button
                            key="notifications-mobile"
                            to="/notifications"
                        >
                            <ListItemIcon>
                                <Badge
                                    badgeContent={
                                        this.state.notificationCount > 0
                                            ? this.state.notificationCount
                                            : ""
                                    }
                                    color="secondary"
                                >
                                    <NotificationsIcon />
                                </Badge>
                            </ListItemIcon>
                            <ListItemText primary="Notifications" />
                        </LinkableListItem>
                        <LinkableListItem
                            button
                            key="messages-mobile"
                            to="/messages"
                        >
                            <ListItemIcon>
                                <MailIcon />
                            </ListItemIcon>
                            <ListItemText primary="Messages" />
                        </LinkableListItem>
                        <Divider />
                    </div>
                    <ListSubheader>More</ListSubheader>
                    <LinkableListItem
                        button
                        key="recommended"
                        to="/recommended"
                    >
                        <ListItemIcon>
                            <GroupIcon />
                        </ListItemIcon>
                        <ListItemText primary="Who to follow" />
                    </LinkableListItem>
                    <LinkableListItem button key="settings" to="/settings">
                        <ListItemIcon>
                            <SettingsIcon />
                        </ListItemIcon>
                        <ListItemText primary="Settings" />
                    </LinkableListItem>
                    <LinkableListItem button key="info" to="/about">
                        <ListItemIcon>
                            <InfoIcon />
                        </ListItemIcon>
                        <ListItemText primary="About" />
                    </LinkableListItem>
                </List>
            </div>
        );
    }

    render() {
        const { classes } = this.props;
        return (
            <div className={classes.root}>
                <div className={classes.stickyArea}>
                    {this.titlebar()}
                    <AppBar className={classes.appBar} position="static">
                        <Toolbar>
                            <IconButton
                                className={classes.appBarMenuButton}
                                color="inherit"
                                aria-label="Open drawer"
                                onClick={this.toggleDrawerOnMobile}
                            >
                                <MenuIcon />
                            </IconButton>
                            <Typography
                                className={classes.appBarTitle}
                                variant="h6"
                                color="inherit"
                                noWrap
                            >
                                {this.state.brandName
                                    ? this.state.brandName
                                    : "Hyperspace"}
                            </Typography>
                            <div className={classes.appBarFlexGrow} />
                            <div className={classes.appBarSearch}>
                                <div className={classes.appBarSearchIcon}>
                                    <SearchIcon />
                                </div>
                                <InputBase
                                    placeholder="Search..."
                                    classes={{
                                        root: classes.appBarSearchInputRoot,
                                        input: classes.appBarSearchInputInput
                                    }}
                                    onKeyUp={event => {
                                        if (event.keyCode === 13) {
                                            this.searchForQuery(
                                                event.currentTarget.value
                                            );
                                        }
                                    }}
                                />
                            </div>
                            <div className={classes.appBarFlexGrow} />
                            <div className={classes.appBarActionButtons}>
                                <Tooltip title="Notifications">
                                    <LinkableIconButton
                                        color="inherit"
                                        to="/notifications"
                                        onClick={this.clearBadge}
                                    >
                                        <Badge
                                            badgeContent={
                                                this.state.notificationCount > 0
                                                    ? this.state
                                                          .notificationCount
                                                    : ""
                                            }
                                            color="secondary"
                                        >
                                            <NotificationsIcon />
                                        </Badge>
                                    </LinkableIconButton>
                                </Tooltip>
                                <Tooltip title="Direct messages">
                                    <LinkableIconButton
                                        color="inherit"
                                        to="/messages"
                                    >
                                        <MailIcon />
                                    </LinkableIconButton>
                                </Tooltip>
                                <Tooltip title="Your account">
                                    <IconButton
                                        id="acctMenuBtn"
                                        onClick={this.toggleAcctMenu}
                                    >
                                        <Avatar
                                            className={
                                                classes.appBarAcctMenuIcon
                                            }
                                            alt="You"
                                            src={
                                                this.state.currentUser
                                                    ? this.state.currentUser
                                                          .avatar_static
                                                    : ""
                                            }
                                        />
                                    </IconButton>
                                </Tooltip>

                                <Menu
                                    id="acct-menu"
                                    anchorEl={document.getElementById(
                                        "acctMenuBtn"
                                    )}
                                    open={this.state.acctMenuOpen}
                                    className={classes.acctMenu}
                                >
                                    <ClickAwayListener
                                        onClickAway={this.toggleAcctMenu}
                                    >
                                        <div>
                                            <LinkableListItem
                                                to={`/profile/${
                                                    this.state.currentUser
                                                        ? this.state.currentUser
                                                              .id
                                                        : "1"
                                                }`}
                                            >
                                                <ListItemAvatar>
                                                    <Avatar
                                                        alt="You"
                                                        src={
                                                            this.state
                                                                .currentUser
                                                                ? this.state
                                                                      .currentUser
                                                                      .avatar_static
                                                                : ""
                                                        }
                                                    />
                                                </ListItemAvatar>
                                                <ListItemText
                                                    primary={
                                                        this.state.currentUser
                                                            ? this.state
                                                                  .currentUser
                                                                  .display_name ||
                                                              this.state
                                                                  .currentUser
                                                                  .acct
                                                            : "Loading..."
                                                    }
                                                    secondary={
                                                        "@" +
                                                        (this.state.currentUser
                                                            ? this.state
                                                                  .currentUser
                                                                  .acct
                                                            : "Loading...")
                                                    }
                                                />
                                            </LinkableListItem>
                                            <Divider />
                                            <LinkableListItem to={"/you"}>
                                                <ListItemText>
                                                    Edit profile
                                                </ListItemText>
                                            </LinkableListItem>
                                            {/* <MenuItem>Switch account</MenuItem> */}
                                            <MenuItem
                                                onClick={() =>
                                                    this.toggleLogOutDialog()
                                                }
                                            >
                                                Log out
                                            </MenuItem>
                                        </div>
                                    </ClickAwayListener>
                                </Menu>
                            </div>
                        </Toolbar>
                    </AppBar>
                    <nav className={classes.drawer}>
                        <Hidden mdUp implementation="css">
                            <Drawer
                                container={this.props.container}
                                variant="temporary"
                                anchor={"left"}
                                open={this.state.drawerOpenOnMobile}
                                onClose={this.toggleDrawerOnMobile}
                                classes={{ paper: classes.drawerPaper }}
                            >
                                {this.appDrawer()}
                            </Drawer>
                        </Hidden>
                        <Hidden smDown implementation="css">
                            <Drawer
                                classes={{
                                    paper: this.titlebar()
                                        ? classes.drawerPaperWithTitleAndAppBar
                                        : classes.drawerPaperWithAppBar
                                }}
                                variant="permanent"
                                open
                            >
                                {this.appDrawer()}
                            </Drawer>
                        </Hidden>
                    </nav>
                </div>
                <Dialog
                    open={this.state.logOutOpen}
                    onClose={() => this.toggleLogOutDialog()}
                >
                    <DialogTitle id="alert-dialog-title">
                        Log out of{" "}
                        {this.state.brandName
                            ? this.state.brandName
                            : "Hyperspace"}
                    </DialogTitle>
                    <DialogContent>
                        <DialogContentText id="alert-dialog-description">
                            You'll need to remove{" "}
                            {this.state.brandName
                                ? this.state.brandName
                                : "Hyperspace"}{" "}
                            from your list of authorized apps and log in again
                            if you want to use{" "}
                            {this.state.brandName
                                ? this.state.brandName
                                : "Hyperspace"}
                            .
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button
                            onClick={() => this.toggleLogOutDialog()}
                            color="primary"
                            autoFocus
                        >
                            Cancel
                        </Button>
                        <Button
                            onClick={() => {
                                this.logOutAndRestart();
                            }}
                            color="primary"
                        >
                            Log out
                        </Button>
                    </DialogActions>
                </Dialog>
                <Tooltip title="Create a new post">
                    <LinkableFab
                        to="/compose"
                        className={classes.composeButton}
                        color="secondary"
                        aria-label="Compose"
                    >
                        <CreateIcon />
                    </LinkableFab>
                </Tooltip>
            </div>
        );
    }
}

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