class Providers extends React.Component {
    constructor(props) {
        super(props);
		
		this.Lang = props.Lang;
/*		this.MID = props.mid;
		if (this.MID == null) this.MID = 0;
		this.stat = props.stat;
		if (this.stat == null)
			this.stat = e=>{return null}
		this.listUsers = props.listUsers;
		if (this.listUsers == null)
			this.listUsers = [];*/
		this.setTitle = props.setTitle;
		this.onLoad = props.onLoad;

		this.refName = React.createRef();
	}

	state = {
		providers:[],

		selPrvrConts:null,

		bAddPrvr:false,		// 추가 창
		editPrvr:null		// 수정 중인 제작사 (null 이면 닫힘)
	};

	async componentDidMount() {
		this.styleMain = R5.wStyle(`
#Prvrs {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display:flex;
	flex-direction:column;
	background:#fff;
	margin:10dp;
}
#Prvrs .tablebox {
	position:relative;
	flex:1;
	min-height:0;
	overflow-y:scroll;
}
#Prvrs .listtable {
	width:100%;
	border-spacing:0;
	border:1px solid #888;
}
#Prvrs .listtable .pnt {
	cursor:pointer;
	text-decoration:underline;
	color:#00a;
}
#Prvrs .listtable .pnt:hover {
	background-color:#fdd;
}
#Prvrs .listtable th {
	font-size:12dp;
	line-height:14dp;
	white-space:pre-wrap;
	padding:2dp 0;
	border-right:1px solid #ccc;
	border-bottom:1px solid #888;
	background:#ddd;
}
#Prvrs .listtable td {
	height:30dp;
	text-align:center;
	font-size:14dp;
	padding:0 5dp;
	border-right:1px solid #ddd;
	border-bottom:1px solid #888;
}

#Prvrs .Conts {
	position:absolute;
	left:100%;
	top:-10dp;
	width:calc(100% + 20dp);
	height:calc(100% + 20dp);
	visibility:hidden;
	opacity:0;
}
#Prvrs .Conts.view {
	left:-10dp;
	visibility:visible;
	opacity:1;
	transition: left 300ms ease-in, opacity 300ms ease-in;
}

#Prvrs .controlbox {
	position:relative;
	flex-shrink:0;
	height:50dp;
}
#Prvrs .btn_add {
	position:relative;
	height:28dp;
	padding:0 12dp;
	margin:10dp 20dp 0 0;
	font-size:15dp;
	line-height:28dp;
	border-radius:5dp;
	background-color:#eee;
	border:1px solid #ccc;
	float:right;
	cursor:pointer;
}
#Prvrs .btn_add:hover {
	background-color:#fee;
	border:1px solid #555;
}

#Prvrs .popup {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:rgba(0,0,0,0.35);
	z-index:10;
}
#Prvrs .popup .dlg {
	position:absolute;
	left:50%;
	top:50%;
	width:340dp;
	box-sizing:border-box;
	padding:20dp;
	background:#fff;
	border:1px solid #888;
	border-radius:8dp;
	transform:translate(-50%,-50%);
}
#Prvrs .popup .dlg .dtitle {
	font-size:17dp;
	font-weight:bold;
	color:#222;
	margin-bottom:14dp;
}
#Prvrs .popup .dlg .drow .cap {
	display:block;
	font-size:12dp;
	color:#666;
	margin-bottom:3dp;
}
#Prvrs .popup .dlg .drow input {
	box-sizing:border-box;
	width:100%;
	height:32dp;
	font-size:15dp;
	padding:0 8dp;
	border:1px solid #bbb;
	border-radius:4dp;
}
#Prvrs .popup .dlg .drow input:focus {
	border-color:#3988ff;
}
#Prvrs .popup .dlg .dbtns {
	margin-top:16dp;
	text-align:right;
}
#Prvrs .popup .dlg .dbtns input {
	height:30dp;
	padding:0 14dp;
	margin-left:6dp;
	font-size:14dp;
	border-radius:4dp;
	border:1px solid #bbb;
	background:#f4f4f4;
	cursor:pointer;
}
#Prvrs .popup .dlg .dbtns input.ok {
	color:#fff;
	border-color:#3988ff;
	background:#3988ff;
}
`);

		this.downloadData();
	}
	
	downloadData() {
		let fd = new FormData();
		axios.post('/api/providers/', fd)
			.then(res=>{
				//console.log(res);
				if (res.data.code != 0){
					alert(res.data.msg);
					return
				}
				let providers = res.data.providers;
				this.setState({ providers:providers });
				
				if (this.onLoad) this.onLoad();
			})
			.catch(e=>{});
	}

	componentWillUnmount() {
		if (this.styleMain != null) {
			this.styleMain.destroy();
			this.styleMain = null;
		}
	}

	render() {
	
		return <div id='Prvrs'>
			<div className="controlbox">
				<div className="btn_add" onClick={e=>this.setState({ bAddPrvr:true, editPrvr:null })}>
					{this.Lang("b_add","pl_table")}
				</div>
			</div>

			<div className="tablebox">
				<table className='listtable'>
					<thead>
						<tr>
							<th>id</th>
							<th>{this.Lang("name","pl_table")}</th>
							<th>{this.Lang("conts","pl_table")}</th>
							<th>{this.Lang("create","pl_table")}</th>
						</tr>
					</thead>
					<tbody>
					{this.state.providers.map(d=>
						<tr>
							<td>{d.pid}</td>
							{/* 이름을 누르면 그 제작사를 수정한다 */}
							<td className="pnt" onClick={e=>this.setState({ editPrvr:d, bAddPrvr:false })}>{d.name}</td>
							<td className="pnt" onClick={e=>this.showContents(d)}>{d.ccnt}</td>
							<td>{(new Date(d.cdate * 1000)).toLocaleString()}</td>
						</tr>)}
					</tbody>
				</table>
			</div>
			
			<div className={this.state.showDid ? "Conts view" : "Conts"}>
			{this.state.selPrvrConts != null &&
				<ContentsList Lang={(k,s)=>this.Lang(k,s)}
					onLoad={e=>this.onLoadSubPage()}
					PID={this.state.selPrvrConts.pid}
					setTitle={(txt,cb)=>{this.setTitle(txt,e=>{cb();this.setContentsTitle(this.state.selPrvrConts)})}} />
			}
			</div>

			{(this.state.bAddPrvr || this.state.editPrvr != null) && this.renderPrvrDlg()}
		</div>
	}

	// 추가와 수정이 같은 창을 쓴다. editPrvr 가 있으면 수정이다.
	// provider 테이블에는 이름 말고 편집할 컬럼이 없다.
	renderPrvrDlg() {
		let prvr = this.state.editPrvr;
		let bEdit = (prvr != null);

		return <div className="popup">
			<div className="dlg">
				<div className="dtitle">
					{bEdit ? this.Lang("edit_title","pl_table") : this.Lang("add_title","pl_table")}
				</div>
				<form onSubmit={e=>{e.preventDefault();this.savePrvr()}}>
					<div className="drow">
						<span className="cap">{this.Lang("name","pl_table")}</span>
						<input type="text" ref={this.refName} autoFocus
							defaultValue={bEdit ? prvr.name : ""} />
					</div>
					<div className="dbtns">
						<input className="ok" type="submit"
							value={bEdit ? this.Lang("b_save","pl_table") : this.Lang("b_add","pl_table")} />
						<input type="button" value={this.Lang("b_cancel","pl_table")}
							onClick={e=>this.setState({ bAddPrvr:false, editPrvr:null })} />
					</div>
				</form>
			</div>
		</div>
	}

	savePrvr() {
		let prvr = this.state.editPrvr;
		let bEdit = (prvr != null);

		let name = (this.refName.current != null) ? this.refName.current.value.trim() : "";
		if (name == "") {
			alert(this.Lang("noname!","pl_table"));
			return;
		}

		let msg = this.Lang(bEdit ? "save?" : "add?","pl_table");
		msg = msg.replace(/%NAME%/g, name);
		if (!confirm(msg))
			return;

		let fd = new FormData();
		fd.append("name", name);
		if (bEdit)
			fd.append("pid", prvr.pid);
		axios.post(bEdit ? '/api/providers/modify/' : '/api/providers/add/', fd)
			.then(res=>{
				if (res.data.code != 0){
					// 이름 중복은 자주 나오는 경우라 번역해서 보여준다
					let bDup = (bEdit ? (res.data.code == 6) : (res.data.code == 4));
					alert(bDup ? this.Lang("dupname!","pl_table") : res.data.msg);
					return
				}
				this.setState({ bAddPrvr:false, editPrvr:null });
				this.downloadData();
			})
			.catch(e=>{});
	}
	
	showContents(prvr) {
		this.setState({ selPrvrConts:prvr, showDid:false });
		this.setContentsTitle(prvr);
	}
	setContentsTitle(prvr) {
		if (this.setTitle) {
			let title = this.Lang("titlebar","cl_table");
			title = title.replace(/%PROVIDER%/g, prvr.name);
			this.setTitle(title, e=>{this.setState({ selPrvrConts:null, showDid:false })});
		}
	}
	onLoadSubPage() {
		this.setState({ showDid:true });
	}
}