//前端教程
import fonts.fontAwesome;
import win.ui;
/*DSG{{*/
var winform = win.form(text="前端教程";right=992;bottom=623;bgcolor=16777215)
winform.add(
custom={cls="custom";left=0;top=0;right=991;bottom=570;db=1;dl=1;dr=1;dt=1;z=6};
nav1={cls="plus";text="网页开发";left=533;top=573;right=640;bottom=605;border={top=1;color=-16744448};db=1;dr=1;font=LOGFONT(name='FontAwesome');z=1};
nav2={cls="plus";text="JavaScript 脚本";left=640;top=573;right=765;bottom=605;border={top=1;color=-16744448};db=1;dr=1;font=LOGFONT(name='FontAwesome');z=2};
nav3={cls="plus";text="React";left=765;top=573;right=839;bottom=605;border={top=1;color=-16744448};db=1;dr=1;font=LOGFONT(name='FontAwesome');z=3};
nav4={cls="plus";text="开发工具";left=839;top=573;right=913;bottom=605;border={top=1;color=-16744448};db=1;dr=1;font=LOGFONT(name='FontAwesome');z=9};
nav5={cls="plus";text="MDN";left=913;top=573;right=978;bottom=605;border={top=1;color=-16744448};db=1;dr=1;font=LOGFONT(name='FontAwesome');z=8};
navBegin={cls="plus";left=273;top=573;right=533;bottom=574;bgcolor=32768;border={color=-16744448};db=1;dl=1;dr=1;forecolor=16777215;linearGradient=180;z=4};
navEnd={cls="plus";left=978;top=573;right=988;bottom=605;border={top=1;color=-16744448};db=1;dr=1;z=5};
static={cls="static";left=0;top=0;right=991;bottom=570;db=1;dl=1;dr=1;dt=1;hide=1;transparent=1;z=7}
)
/*}}*/

import win.ui.atom;
var atom,hwnd = winform.atom("{7353F88E-7B9F-41A6-80AC-B5E6A75947BF}.web");
if(!atom){
	win.showForeground(hwnd);
	win.quitMessage();	
	return;
}

import web.view;
var wb = web.view(winform.static);
if(_WINXP){ error("本程序基于 WebView2 ，不支持 XP 系统",2) }

import win.ui.tabs;
var tbs = win.ui.tabs(winform.nav1,winform.nav2,winform.nav3,winform.nav4,winform.nav5);
tbs.container = winform.custom;
tbs.margin = 0;

var frmMdn = win.form(text="MDN";right=966;bottom=622);
var wbMdn = web.view(frmMdn);
wbMdn.go("https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/html");
tbs.loadForm(5,frmMdn);

var urls = {
	"https://chinese.freecodecamp.org/learn/responsive-web-design/";
	"https://chinese.freecodecamp.org/learn/javascript-algorithms-and-data-structures/";
	"https://chinese.freecodecamp.org/learn/front-end-libraries/#react"; 
}

tbs.onSelchange = function(idx,strip,form){
	var url = urls[idx];
	if(url){ 
		winform.custom.show(false);
		winform.static.show(true);
		
		strip.disabledText = {'\uF254';'\uF251';'\uF252';'\uF253';'\uF250'}
		wb.go(url);
		
		win.delay(500);
		strip.disabledText = null;
	} 
	else {
		winform.custom.show(true);
		winform.static.show(false);
		if(idx==4){
			tbs.selForm.checkInstall();
		}
	}
}

tbs.skin({
	foreground={
		active=0xFFFFFFFF;
		default=0x00FFFFFF;
		hover=0xFFCCCCCC;
	};
	checked={
		foreground={ 
			default=0x00FFFFFF; 
		};
		border = { 
			default = {left=1;right=1;bottom=1;color=0xFF008000} 
			disabled = {left=1;right=1;bottom=1;color=0xFF008000} 
		}; 
	}
}); 


var frmDev = win.form(text="前端开发工具";right=1061;bottom=550)
frmDev.add(
btnCreateApp={cls="plus";text="创建 React 工程";left=838;top=507;right=1004;bottom=537;align="left";bgcolor=-5197169;db=1;dr=1;font=LOGFONT(h=-13);iconStyle={align="left";font=LOGFONT(h=-13;name='FontAwesome');padding={left=20}};iconText='\uF0AD';notify=1;textPadding={left=39};z=3};
btnInstall={cls="plus";text="安装前端开发工具";left=635;top=507;right=816;bottom=537;align="left";bgcolor=-5197169;db=1;dr=1;font=LOGFONT(h=-13);iconStyle={align="left";font=LOGFONT(h=-13;name='FontAwesome');padding={left=20}};iconText='\uF013';notify=1;textPadding={left=39};z=1};
edit={cls="edit";left=10;top=10;right=1051;bottom=488;db=1;dl=1;dr=1;dt=1;edge=1;multiline=1;z=2}
)

frmDev.btnCreateApp.skin({
	background={
		default=0x668FB2B0;
		disabled=0xFFCCCCCC;
		hover=0xFF928BB3
	};
	color={
		default=0xFF000000;
		disabled=0xFF6D6D6D
	}
})

frmDev.btnInstall.skin({
	background={
		default=0x668FB2B0;
		disabled=0xFFCCCCCC;
		hover=0xFF928BB3
	};
	color={
		default=0xFF000000;
		disabled=0xFF6D6D6D
	}
})

import nodeJs;
import process.code;
frmDev.checkInstall  = function(){
	frmDev.edit.text = "";
	
	var nodePath = nodeJs.getInstallPath();
	frmDev.edit.printf(nodePath ? ("Node.js 安装路径："+nodePath) : "未安装 Node.js，请点击「安装前端开发工具」按钮");
	
	var codePath = process.code.getInstallPath();
	frmDev.edit.printf(codePath ? ("VS Code 安装路径："+codePath) : "未安装 VS Code，请点击「安装前端开发工具」按钮");
	
	if(nodePath && codePath){
		frmDev.edit.printf("请点击「创建 React 工程」按钮");
		frmDev.btnInstall.disabledText = "已安装开发工具";
		frmDev.btnCreateApp.disabled = false;
	} 
	else {
		frmDev.btnCreateApp.disabled = true;
	}
}

import fsys;
import fsys.dlg.dir;
frmDev.btnCreateApp.oncommand = function(id,event){
	var path = fsys.dlg.dir(,winform,'请选择 React 工程目录( 必须是空目录 )')
	if(!path) return;
	
	nodeJs.workDir = path;

	execute("npm uninstall -g create-react-app")
	execute("yarn global remove create-react-app")
	nodeJs.npm("init react-app ./react-app")
	
	var path = io.joinpath(path,"react-app");
	if(io.exist(path)){
		process.code(path);
	}
}

frmDev.btnInstall.oncommand = function(id,event){
	nodeJs.install();
	process.code.install();
	frmDev.checkInstall();
}

tbs.loadForm(4,frmDev);
tbs.selIndex = 5;

winform.show(3/*_SW_MAXIMIZE*/);
win.loopMessage();