export default class Toolbar extends Component<object, { omniboxValue: string, canGoBack: boolean, canGoForward: boolean, key: number }> {
    public constructor() {
        super({});
        this.state = {
            omniboxValue: "",
            canGoBack: false,
            canGoForward: false,
            key: Date.now()
        };
    }
    public render(): ReactNode {
        return (
            <div id={"toolbar"}>
                <div id={"history"} className={"icon-group"}>
                    <i
                        className={classNames("material-icons round", { "inactive": !this.state.canGoBack })}
                        onClick={() => preloadExports.tab.goBack()}>arrow_back_ios</i>
                    <i
                        className={classNames("material-icons round", { "inactive": !this.state.canGoForward })}
                        onClick={() => preloadExports.tab.goForward()}>arrow_forward_ios</i>
                </div>
                <input
                    type={"text"}
                    id={"omnibox"}
                    placeholder={"Search or type a URL"}
                    defaultValue={this.state.omniboxValue}
                    key={this.state.key}
                    onChange={event => {
                        console.log(event.currentTarget.value)
                    }}/>
                <div className={"icon-group"}>
                    <i className={"material-icons round"}>refresh</i>
                    <i className={"material-icons inactive"}>more_vert</i>
                    <i className={"material-icons round inactive"}>bookmarks</i>
                </div>
            </div>
        );
    }
    public componentDidMount(): void {
        rendererEventEmitter.on("tabs-updated", tabData => {
            const selectedTab = tabData.tabs[tabData.selected];
            this.setState({
                omniboxValue: selectedTab.url,
                canGoForward: selectedTab.canGoForward,
                canGoBack: selectedTab.canGoBack,
                key: Date.now()
            });
        });
    }
}