import ServerEnvironment, { ServerTarget } from "./module/Config/ServerEnvironment";
import ServerSwitch from "./module/Config/ServerSwitch";

const { ccclass } = cc._decorator;

/** Constructed only in the development/trial HomeScene settings footer. */
@ccclass
export default class ServerSelector extends cc.Component {
    private radios: Array<{ target: ServerTarget; graphics: cc.Graphics }> = [];
    private hint: cc.Label = null;

    onLoad(): void {
        this.node.setContentSize(750, 150);
        this.label("服务器", -280, 28, 150, 42, true);
        this.option("production", "正式服", -20);
        this.option("test", "测试服", 230);
        this.hint = this.label("", 0, -42, 750, 30, false);
        this.refresh();
    }

    onEnable(): void { if (this.hint) this.refresh(); }

    private label(text: string, x: number, y: number, width: number, size: number, bold: boolean): cc.Label {
        const node = new cc.Node("Label");
        // Adding a live Label renders its initial empty string with Overflow.NONE,
        // which replaces the node size. Configure it before the first onEnable.
        node.active = false;
        node.parent = this.node;
        node.setPosition(x, y);
        node.color = cc.color(164, 105, 58);
        const label = node.addComponent(cc.Label);
        label.useSystemFont = true;
        label.fontFamily = "Arial";
        label.fontSize = size;
        label.lineHeight = size + 8;
        label.enableBold = bold;
        label.horizontalAlign = cc.Label.HorizontalAlign.CENTER;
        label.verticalAlign = cc.Label.VerticalAlign.CENTER;
        label.overflow = cc.Label.Overflow.SHRINK;
        label.enableWrapText = false;
        label.string = text;
        node.setContentSize(width, size + 12);
        node.active = true;
        return label;
    }

    private option(target: ServerTarget, text: string, x: number): void {
        const button = new cc.Node(target);
        button.parent = this.node;
        button.setPosition(x, 28);
        button.setContentSize(230, 78);
        button.addComponent(cc.Button);
        const circle = new cc.Node("Radio");
        circle.parent = button;
        circle.setPosition(-88, 0);
        const graphics = circle.addComponent(cc.Graphics);
        this.radios.push({ target, graphics });
        this.label(text, x + 15, 28, 160, 42, true);
        button.on("click", () => ServerSwitch.choose(target, () => this.refresh()), this);
    }

    private refresh(): void {
        if (!cc.isValid(this.node)) return;
        const current = ServerEnvironment.current();
        const next = ServerEnvironment.next();
        this.radios.forEach(({ target, graphics }) => {
            graphics.clear();
            graphics.lineWidth = 4;
            graphics.strokeColor = cc.color(175, 119, 70);
            graphics.fillColor = cc.color(255, 246, 218);
            graphics.circle(0, 0, 22);
            graphics.fill();
            graphics.stroke();
            if (target === current) {
                graphics.fillColor = cc.color(192, 122, 64);
                graphics.circle(0, 0, 12);
                graphics.fill();
            }
        });
        this.hint.string = next === current ? "切换后将重启游戏"
            : `当前${current === "test" ? "测试服" : "正式服"} · 重启后切至${next === "test" ? "测试服" : "正式服"}`;
    }
}