import React from "react";
import CGReact from "cgreact-core";
import AppContext from "../main";
import CGReactCss from "./page-cgreact.css";
import CGReactLogo from "../assets/img/cgreact.svg";

export default class PageCGReact extends CGReact.CGReactPage implements CGReact.KeyboardPressSlot
{
    protected affectStyle(): JSS
    {
        return CGReactCss;
    }

    protected async initState(): Promise<PageState>
    {
        return undefined;
    }

    protected renderView(): JSX
    {
        return <div className="App">
            <header className="App-header">
                <p>
                    江苏中科西北星信息科技有限公司
                </p>
                <img src={CGReactLogo} className="App-logo" alt="logo"/>
                <p>
                    欢迎来到 <code>CGReact</code> 别来无恙啊！
                </p>
                <p>
                    我先把在main中的债还给你，点击<a style={{
                    color: "cyan",
                    cursor: "pointer"
                }} onClick={this.onCallButtonClick.bind(this)}>调用main中的方法</a>.
                </p>
                <p>
                    现在你可以跳到 <code className="cg" onClick={() => this.redirectToURL("page-my")}>PageMy页面</code> 调试你的修改.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    或者 开始愉快的学习CGReact，并将懒惰进行到底！
                </a>
            </header>
        </div>;
    }

    private onCallButtonClick(): void
    {
        AppContext.sayHello();
    }

    onKeyDown(message: KeyboardEvent): void
    {
        console.log("有的时候你希望在对应的Page或者Component中处理一些事件，只需要实现对应的插槽接口（参考上面类定义后面的implements），就会自动实现这个方法");
        console.log("再顺便告诉你一个秘密，这个方法中的this仍然是本类CGReactPage哦！")
    }
}