import * as React from "react";
import QRCode from "qrcode";
import "./toolbar.css";

import UrlInput from "../url-input/url-input";

const iconBackwardStyle = {
    backgroundImage: `url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNDI3IDIzNC42MjVIMTY3LjI5NmwxMTkuNzAyLTExOS43MDJMMjU2IDg1IDg1IDI1NmwxNzEgMTcxIDI5LjkyMi0yOS45MjQtMTE4LjYyNi0xMTkuNzAxSDQyN3YtNDIuNzV6Ii8+PC9zdmc+)`,
};

const iconForwardStyle = {
    backgroundImage: `url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNODUgMjc3LjM3NWgyNTkuNzA0TDIyNS4wMDIgMzk3LjA3NyAyNTYgNDI3bDE3MS0xNzFMMjU2IDg1bC0yOS45MjIgMjkuOTI0IDExOC42MjYgMTE5LjcwMUg4NXY0Mi43NXoiLz48L3N2Zz4=)`,
};

const iconRefreshStyle = {
    backgroundImage: `url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDM4OGMtNzIuNTk3IDAtMTMyLTU5LjQwNS0xMzItMTMyIDAtNzIuNjAxIDU5LjQwMy0xMzIgMTMyLTEzMiAzNi4zIDAgNjkuMjk5IDE1LjQgOTIuNDA2IDM5LjYwMUwyNzggMjM0aDE1NFY4MGwtNTEuNjk4IDUxLjcwMkMzNDguNDA2IDk5Ljc5OCAzMDQuNDA2IDgwIDI1NiA4MGMtOTYuNzk3IDAtMTc2IDc5LjIwMy0xNzYgMTc2czc4LjA5NCAxNzYgMTc2IDE3NmM4MS4wNDUgMCAxNDguMjg3LTU0LjEzNCAxNjkuNDAxLTEyOEgzNzguODVjLTE4Ljc0NSA0OS41NjEtNjcuMTM4IDg0LTEyMi44NSA4NHoiLz48L3N2Zz4=)`,
};

const iconDocStyle = {
    backgroundImage: `url(data:image/svg+xml;base64,PHN2ZyB0PSIxNTcyOTQ4MTI0NjQ1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIyNjgiIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4Ij48cGF0aCBkPSJNNTEyIDBDMjI5LjIzMzc3OCAwIDAgMjI5LjIzMzc3OCAwIDUxMnMyMjkuMjMzNzc4IDUxMiA1MTIgNTEyIDUxMi0yMjkuMjMzNzc4IDUxMi01MTJBNTEyIDUxMiAwIDAgMCA1MTIgMHogbTAgOTM4LjY2NjY2N0MyNzYuMzY2MjIyIDkzOC42NjY2NjcgODUuMzMzMzMzIDc0Ny42MzM3NzggODUuMzMzMzMzIDUxMiA4NS4zMzMzMzMgMjc2LjM2NjIyMiAyNzYuMzY2MjIyIDg1LjMzMzMzMyA1MTIgODUuMzMzMzMzYzIzNS42MzM3NzggMCA0MjYuNjY2NjY3IDE5MS4wMzI4ODkgNDI2LjY2NjY2NyA0MjYuNjY2NjY3YTQyNi42NjY2NjcgNDI2LjY2NjY2NyAwIDAgMS00MjYuNjY2NjY3IDQyNi42NjY2Njd6IG0wLTcxNy42NTMzMzRhMTcwLjY2NjY2NyAxNzAuNjY2NjY3IDAgMCAwLTE3MC42NjY2NjcgMTcwLjY2NjY2NyA0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDg1LjMzMzMzNCAwIDg1LjMzMzMzMyA4NS4zMzMzMzMgMCAxIDEgODUuMzMzMzMzIDg1LjMzMzMzMyA0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwLTQyLjY2NjY2NyA0Mi42NjY2Njd2MTExLjM2YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDAgODUuMzMzMzM0IDB2LTc0LjI0QTE3MC42NjY2NjcgMTcwLjY2NjY2NyAwIDAgMCA1MTIgMjIxLjAxMzMzM3ogbS00Mi42NjY2NjcgNTQyLjI5MzMzNGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAwIDg1LjMzMzMzNCAwIDQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDAtODUuMzMzMzM0IDB6IiBmaWxsPSIjMDAwMDAwIiBwLWlkPSIyMjY5Ii8+PC9zdmc+)`,
};

const iconQRcodeStyle = {
    backgroundImage: `url(data:image/svg+xml;base64,PHN2ZyB0PSIxNTcyOTQ4MjEwNTA3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM3MDIiIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4Ij48cGF0aCBkPSJNMTUyLjA3NTI2NCAxMjMuNTExODA4YzEwMS43MTY5OTIgMCAyMDMuNDM1MDA4IDAgMzA1LjE1MiAwIDMxLjAzMTI5NiAzLjA3MzAyNCAyMy41NTIgNTcuNjk2MjU2IDIzLjU1MiA5My4xODQgMCA2My43NDI5NzYgMCAxMDUuNzU1NjQ4IDAgMTY4Ljk2IDAgMzYuNzIxNjY0IDYuOTE1MDcyIDgxLjcyOTUzNi0xNy40MDggOTIuMTYtMTUuODQwMjU2IDYuNzkzMjE2LTU4LjM1MTYxNiAyLjA0OC03OC44NDggMi4wNDgtNTYuMjcxODcyIDAtMTAyLjAxMjkyOCAwLTE2MS43OTIgMC0zNy40MDA1NzYgMC04OC40Njk1MDQgOC45MjcyMzItOTQuMjA4LTIzLjU1MiAwLTEwMy4wODMwMDggMC0yMDYuMTY0OTkyIDAtMzA5LjI0OEMxMzIuNzA1MjggMTM1LjU0NDgzMiAxNDAuMDYxNjk2IDEyNy4yMDAyNTYgMTUyLjA3NTI2NCAxMjMuNTExODA4ek0xOTQuMDU5MjY0IDE5My4xNDM4MDhjMCA3My4zODcwMDggMCAxNDYuNzcyOTkyIDAgMjIwLjE2IDczLjM4NzAwOCAwIDE0Ni43NzI5OTIgMCAyMjAuMTYgMCAwLTc0LjQxMTAwOCAwLTE0OC44MjA5OTIgMC0yMjMuMjMyLTczLjA0NDk5MiAwLTE0Ni4wOTEwMDggMC0yMTkuMTM2IDBDMTkzLjg5MDMwNCAxOTAuMjQzODQgMTkzLjk3MTIgMTkxLjY5MDc1MiAxOTQuMDU5MjY0IDE5My4xNDM4MDh6IiBwLWlkPSIzNzAzIi8+PHBhdGggZD0iTTU2MS42NzUyNjQgMTIzLjUxMTgwOGMxMDEuNzE2OTkyIDAgMjAzLjQzNTAwOCAwIDMwNS4xNTIgMCAxMi40NDc3NDQgNC42MTgyNCAyMS4wMDEyMTYgMTMuMTMyOCAyMy41NTIgMjcuNjQ4IDAgMTAwLjM1MiAwIDIwMC43MDUwMjQgMCAzMDEuMDU2LTIuNzkyNDQ4IDEyLjUxMDIwOC05LjMyNDU0NCAyMy4xOTY2NzItMjEuNTA0IDI2LjYyNC0xOS45MDQ1MTIgNS42MDAyNTYtNTIuOTc3NjY0IDEuMDI0LTc2LjggMS4wMjQtNTYuMTI3NDg4IDAtMTAyLjE0OTEyIDAtMTU2LjY3MiAwLTIzLjYyNjc1MiAwLTU4LjY0MjQzMiA0Ljk3NjY0LTc3LjgyNC0xLjAyNC0yNy4wNzc2MzItOC40NzE1NTItMTkuNDU2LTYxLjMyOTQwOC0xOS40NTYtOTguMzA0IDAtNDkuMTE1MTM2IDAtMTA2LjQ0NTgyNCAwLTE1Ny42OTZDNTM4LjEyMzI2NCAxODAuMTQ4MjI0IDUyOC43NTI2NCAxMjkuNDc2NjA4IDU2MS42NzUyNjQgMTIzLjUxMTgwOHpNNjAzLjY1OTI2NCAxOTMuMTQzODA4YzAgNzMuMzg3MDA4IDAgMTQ2Ljc3Mjk5MiAwIDIyMC4xNiA3My4zODcwMDggMCAxNDYuNzcyOTkyIDAgMjIwLjE2IDAgMC03NC40MTEwMDggMC0xNDguODIwOTkyIDAtMjIzLjIzMi03My4wNDQ5OTIgMC0xNDYuMDkxMDA4IDAtMjE5LjEzNiAwQzYwMy40OTAzMDQgMTkwLjI0Mzg0IDYwMy41NzEyIDE5MS42OTA3NTIgNjAzLjY1OTI2NCAxOTMuMTQzODA4eiIgcC1pZD0iMzcwNCIvPjxwYXRoIGQ9Ik0yOTQuNDExMjY0IDI1Ny42NTU4MDhjMzAuNjYxNjMyLTUuNzg2NjI0IDU0Ljc3NDc4NCAxNC45MzA5NDQgNTUuMjk2IDQzLjAwOCAwLjY4NzEwNCAzNy4wMjU3OTItMzcuMTI5MjE2IDU3LjM2NTUwNC02Ni41NiA0MS45ODRDMjQ5LjQ3NzEyIDMyNS4wNTAzNjggMjUxLjY5MzA1NiAyNjUuNzE3NzYgMjk0LjQxMTI2NCAyNTcuNjU1ODA4eiIgcC1pZD0iMzcwNSIvPjxwYXRoIGQ9Ik03MDQuMDExMjY0IDI1Ny42NTU4MDhjNzIuMjIzNzQ0LTEzLjQ5MzI0OCA3MC44MzkyOTYgMTAwLjg4NjUyOCAwIDg5LjA4OEM2NTguOTI5NjY0IDMzOS4yMzU4NCA2NTcuNDc0NTYgMjY2LjM1MDU5MiA3MDQuMDExMjY0IDI1Ny42NTU4MDh6IiBwLWlkPSIzNzA2Ii8+PHBhdGggZD0iTTQ1NS4xNzkyNjQgODk1LjYwNzgwOGMtMTAwLjY5Mjk5MiAwLTIwMS4zODU5ODQgMC0zMDIuMDggMC0xMi41NDA5MjgtMy44NDMwNzItMjEuMDEyNDgtMTEuNzU1NTItMjQuNTc2LTI0LjU3NiAwLTEwMi43NDA5OTIgMC0yMDUuNDgzMDA4IDAtMzA4LjIyNCAyLjk4MjkxMi05LjAxOTM5MiA5Ljg2ODI4OC0xOS41NDIwMTYgMjAuNDgtMjIuNTI4IDIwLjA0NDgtNS42NDAxOTIgNTIuNzg3Mi0xLjAyNCA3Ni44LTEuMDI0IDU1LjE4OTUwNCAwIDEwNS4xODQyNTYgMCAxNTYuNjcyIDAgMjMuMTU0Njg4IDAgNTYuODUyNDgtNS4xNjgxMjggNzcuODI0IDEuMDI0IDI4LjM3MTk2OCA4LjM3NjMyIDIwLjQ4IDYwLjM3NjA2NCAyMC40OCA5Ny4yOCAwIDU2LjcyOTYgMCAxMDUuMTIxNzkyIDAgMTYyLjgxNkM0ODAuNzc5MjY0IDg0MC4yMDYzMzYgNDg5LjM1NjI4OCA4OTIuMDUxNDU2IDQ1NS4xNzkyNjQgODk1LjYwNzgwOHpNMTk0LjA1OTI2NCA2MDguODg3ODA4YzAgNzMuMzg4MDMyIDAgMTQ2Ljc3Mjk5MiAwIDIyMC4xNiA3My4zODcwMDggMCAxNDYuNzcyOTkyIDAgMjIwLjE2IDAgMC03NC40MTEwMDggMC0xNDguODIwOTkyIDAtMjIzLjIzMi03My4wNDQ5OTIgMC0xNDYuMDkxMDA4IDAtMjE5LjEzNiAwQzE5My44OTAzMDQgNjA1Ljk4Nzg0IDE5My45NzEyIDYwNy40MzQ3NTIgMTk0LjA1OTI2NCA2MDguODg3ODA4eiIgcC1pZD0iMzcwNyIvPjxwYXRoIGQ9Ik04OTAuMzc5MjY0IDU2Ni45MDM4MDhjMCAyOC42NzIgMCA1Ny4zNDQgMCA4Ni4wMTYtMi4zODg5OTIgMjkuMDE0MDE2LTAuMzQyMDE2IDYyLjQ2Mjk3Ni0xLjAyNCA5My4xODQtNzIuNzA0IDAtMTQ1LjQwOCAwLTIxOC4xMTIgMCAwLTE2LjcyNDk5MiAwLTMzLjQ1MTAwOCAwLTUwLjE3Ni0yMC40ODEwMjQtMi4zODc5NjgtNDUuMzk1OTY4LTAuMzQyMDE2LTY3LjU4NC0xLjAyNC0yLjM4ODk5MiA2NC44NTQwMTYtMC4zNDA5OTIgMTM0LjE0Mjk3Ni0xLjAyNCAyMDAuNzA0LTEzLjMxMiAwLTI2LjYyNCAwLTM5LjkzNiAwLTM0LjMzNzc5Mi02Ljg4MjMwNC0yNC41NzYtNTguNDA3OTM2LTI0LjU3Ni05OS4zMjggMC01Ny4wNzg3ODQgMC0xMDQuMDQyNDk2IDAtMTU4LjcyIDAtMjMuODY1MzQ0LTQuODMwMjA4LTU5LjY0Mjg4IDEuMDI0LTc4Ljg0OCA2Ljk4NDcwNC0yMi45MTMwMjQgMzcuMjc0NjI0LTE5LjQ1NiA2Ny41ODQtMTkuNDU2IDUxLjI0MDk2IDAgOTYuODkxOTA0IDAgMTQ4LjQ4IDAgMCA0NS4zOTY5OTIgMCA5MC43OTUwMDggMCAxMzYuMTkyIDIyLjg2ODk5MiAwIDQ1LjczOTAwOCAwIDY4LjYwOCAwIDAuNjgxOTg0LTQ1LjA1Ni0xLjM2NDk5Mi05Mi44NDE5ODQgMS4wMjQtMTM2LjE5MkM4NTcuODU4MDQ4IDUzNy4zMDIwMTYgODg4LjQzOTgwOCA1MzcuNzgzMjk2IDg5MC4zNzkyNjQgNTY2LjkwMzgwOHoiIHAtaWQ9IjM3MDgiLz48cGF0aCBkPSJNMjk5LjUzMTI2NCA2NzIuMzc1ODA4YzMyLjc0MDM1Mi0zLjYyMzkzNiA1OS44MDQ2NzIgMjcuODQxNTM2IDQ3LjEwNCA2Mi40NjQtMTcuNjA0NjA4IDQ3Ljk4OTc2LTEwMS43Nzg0MzIgMjkuOTUzMDI0LTg2LjAxNi0zMC43MkMyNjQuOTc2Mzg0IDY4Ny4zNDg3MzYgMjc3LjU2MTM0NCA2NzQuODA3ODA4IDI5OS41MzEyNjQgNjcyLjM3NTgwOHoiIHAtaWQ9IjM3MDkiLz48cGF0aCBkPSJNNzQ0Ljk3MTI2NCA4OTUuNjA3ODA4Yy0yNC41NzYgMC00OS4xNTIgMC03My43MjggMCAwLjY4MTk4NC0yNi4yODQwMzItMS4zNjM5NjgtNTUuMjk0OTc2IDEuMDI0LTc5Ljg3MiAyNC4yMzUwMDggMCA0OC40Njg5OTIgMCA3Mi43MDQgMEM3NDQuOTcxMjY0IDg0Mi4zNTk4MDggNzQ0Ljk3MTI2NCA4NjguOTgzODA4IDc0NC45NzEyNjQgODk1LjYwNzgwOHoiIHAtaWQ9IjM3MTAiLz48cGF0aCBkPSJNODkwLjM3OTI2NCA4MTUuNzM1ODA4YzAgMTcuNDA4IDAgMzQuODE2IDAgNTIuMjI0LTIuODQ2NzIgMTQuNTYxMjgtMTEuMzYxMjggMjMuNDU0NzItMjQuNTc2IDI3LjY0OC0xNy40MDggMC0zNC44MTYgMC01Mi4yMjQgMCAwLjY4MTk4NC0yNi4yODQwMzItMS4zNjM5NjgtNTUuMjk0OTc2IDEuMDI0LTc5Ljg3MkM4MzkuODYyMjcyIDgxNS43MzU4MDggODY1LjEyMDI1NiA4MTUuNzM1ODA4IDg5MC4zNzkyNjQgODE1LjczNTgwOHoiIHAtaWQ9IjM3MTEiLz48L3N2Zz4=)`,
};

const iconDeviceStyle = {
    backgroundImage: `url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjU0MTUzMDM5ODYxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEzMDciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiBkYXRhLXNwbS1hbmNob3ItaWQ9ImEzMTN4Ljc3ODEwNjkuMC5pNiI+PHBhdGggZD0iTTg1My4zMzMzMzMgMTI4SDI5OC42NjY2NjdjLTQ3LjA2MTMzMyAwLTg1LjMzMzMzMyAzOC4yNzItODUuMzMzMzM0IDg1LjMzMzMzM3Y4NS4zMzMzMzRIMTcwLjY2NjY2N2MtNDcuMDYxMzMzIDAtODUuMzMzMzMzIDM4LjI3Mi04NS4zMzMzMzQgODUuMzMzMzMzdjQyNi42NjY2NjdjMCA0Ny4wNjEzMzMgMzguMjcyIDg1LjMzMzMzMyA4NS4zMzMzMzQgODUuMzMzMzMzaDI1NmM0Ny4wNjEzMzMgMCA4NS4zMzMzMzMtMzguMjcyIDg1LjMzMzMzMy04NS4zMzMzMzNoMzQxLjMzMzMzM2M0Ny4wNjEzMzMgMCA4NS4zMzMzMzMtMzguMjcyIDg1LjMzMzMzNC04NS4zMzMzMzRWMjEzLjMzMzMzM2MwLTQ3LjA2MTMzMy0zOC4yNzItODUuMzMzMzMzLTg1LjMzMzMzNC04NS4zMzMzMzN6TTI1NiAzODRoMTcwLjY2NjY2N2wtMC4xMjggMzg0SDE3MC42NjY2NjdWMzg0aDg1LjMzMzMzM3ogbTI1NiAzNDEuMzMzMzMzVjM4NGMwLTQ3LjA2MTMzMy0zOC4yNzItODUuMzMzMzMzLTg1LjMzMzMzMy04NS4zMzMzMzNIMjk4LjY2NjY2N1YyMTMuMzMzMzMzaDQ2OS4zMzMzMzN2NTEyaC0yNTZ6IiBwLWlkPSIxMzA4IiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+PC9zdmc+)`,
};

interface IToolbarProps {
    canGoBack: boolean;
    canGoForward: boolean;
    url: string;
    onActionInvoked: (action: string, data?: object) => void;
}

class Toolbar extends React.Component<IToolbarProps, any> {
    constructor(props: any) {
        super(props);

        this.handleBack = this.handleBack.bind(this);
        this.handleForward = this.handleForward.bind(this);
        this.handleRefresh = this.handleRefresh.bind(this);
        this.handleUrlChange = this.handleUrlChange.bind(this);
        this.handleDoc = this.handleDoc.bind(this);
    }

    public render() {
        return (
            <div className="toolbar">
                <div className="inner">
                    <button
                        className="backward"
                        title="backward"
                        style={iconBackwardStyle}
                        onClick={this.handleBack}
                        disabled={!this.props.canGoBack}
                    >
                        Backward
                    </button>
                    <button
                        className="forward"
                        title="forward"
                        style={iconForwardStyle}
                        onClick={this.handleForward}
                        disabled={!this.props.canGoForward}
                    >
                        Forward
                    </button>
                    <button className="refresh" title="refresh" style={iconRefreshStyle} onClick={this.handleRefresh}>
                        Refresh
                    </button>
                    <UrlInput
                        url={this.props.url}
                        onUrlChanged={this.handleUrlChange}
                        onActionInvoked={this.props.onActionInvoked}
                    />
                    <button className="device" title="toggle device" style={iconDeviceStyle} onClick={this.handleDevice}>
                        device
                    </button>
                    <button className="doc" title="doc" style={iconDocStyle} onClick={this.handleDoc}>
                        doc
                    </button>
                    <button
                        className="QR-code"
                        style={iconQRcodeStyle}
                        onMouseEnter={() => this.handleQRCodeMouseMove()}
                    >
                        <div className="QR-code-canvas">
                            <canvas id="canvas"></canvas>
                        </div>
                    </button>
                </div>
            </div>
        );
    }

    private renderCanvasQRCode(url: string) {
        const canvasDom = document.getElementById("canvas")!;
        if (!canvasDom) return;
        QRCode.toCanvas(canvasDom!, url);
        (canvasDom as HTMLCanvasElement).setAttribute("style", "height: 100px;width: 100px;");
    }

    private handleQRCodeMouseMove() {
        this.renderCanvasQRCode(this.props.url);
    }

    private handleDoc() {
        this.props.onActionInvoked("openDoc", { });
    }

    private handleDevice() {
        const boxDom = document.getElementById("device-box");
        boxDom!.classList.toggle('marvel-device');
        const webviewIframeDom = document.getElementById('webviewIframe')
        const h = webviewIframeDom!.style.height;
        webviewIframeDom!.style.height = h === '100%' ? '100vh' : '100%';
    }

    private handleUrlChange(url: string) {
        this.props.onActionInvoked("urlChange", { url });
    }

    private handleBack() {
        this.props.onActionInvoked("backward", {});
    }

    private handleForward() {
        this.props.onActionInvoked("forward", {});
    }

    private handleRefresh() {
        this.props.onActionInvoked("refresh", {});
    }
}

export default Toolbar;