/*
https://i.ytimg.com/vi_webp/{ключ к видео}/maxresdefault.webp
*/
function detect_mobile() {
	const toMatch = [
		/Android/i,
		/webOS/i,
		/iPhone/i,
		/iPad/i,
		/iPod/i,
		/BlackBerry/i,
		/Windows Phone/i
	];
    
	return toMatch.some((toMatchItem) => {
		return navigator.userAgent.match(toMatchItem);
	});
}

let styles = {
	"card": {
		width: (detect_mobile() ? "90%" : "250px"),
		backgroundColor: "white",
		padding: (detect_mobile() ? "15px" : "5px"),
		margin: (detect_mobile() ? "30px" : "10px"),
		border: "3px solid black",
		borderRadius: (detect_mobile() ? "30px" : "10px")
	},
	"img": {
		width: "100%",
		aspectRatio: "1/1",
		borderRadius: (detect_mobile() ? "15px" : "5px"),
		border: "1px solid red",
		marginBottom: (detect_mobile() ? "15px" : "5px")
	},
	"donate_img": {
		width: "1%",
		aspectRatio: "1/1",
		borderRadius: (detect_mobile() ? "15px" : "5px"),
		border: "1px solid red",
		marginBottom: (detect_mobile() ? "15px" : "5px")
	},
	"info_btn": {
		width: "100%",
		height: (detect_mobile() ? "120px" : "40px"),
		fontSize: (detect_mobile() ? "51px" : "17px"),
		borderRadius: (detect_mobile() ? "15px" : "5px"),
		background_color: "blue"
	},
	"card_title": {
		fontFamily: "'MyArial', Arial, sans-serif",
		fontSize: (detect_mobile() ? "3.75rem" : "1.25rem"),
		textTransform: "uppercase",
		textAlign: "center"
	},
	"card_text": {
		fontSize: (detect_mobile() ? "48px" : "16px")
	},
	"card_body": {
		width: "100%",
		height: "100%"
	},
	"donate_input": {
		display: "flex",
		justifyContent: "center",
		alignItems: "center",
		width: (detect_mobile() ? "100%" : "80%"),
		height: "120px"
	}
};

class Card extends React.Component {
	render(){
		return (
			<div class="card" style={styles.card}>
				<img className="card-img" style={styles.img} src={this.props.img ? this.props.img : 'События/черемша.gif'}/>
				<div className="card-body">
					<h5 className="card-title" style={styles.card_title}>{this.props.name ? this.props.name : '???'}</h5>
					<p className="card-text" style={styles.card_text} dangerouslySetInnerHTML={{__html: this.props.description}}></p>
				</div>
				{
					(((this.props.partition !== null) && (this.props.category !== null)) && (this.props.id !== null)) ? (
						<button className="info-btn btn btn-primary" style={styles.info_btn} onClick={() => {show_info(this.props.partition, this.props.category, this.props.id)}}>Подробнее</button>
					) : (
						<br/>
					)
				}
				
			</div>
		);
	}
}

/*
https://yoomoney.ru/quickpay/fundraise/button?
targets=кика
&default-sum=100
&button-text=12
&yoomoney-payment-type=on
&button-size=xl
&button-color=orange
&successURL=
&quickpay=small
&account=4100116763942651&
*/
class DonateCard extends React.Component {
	render(){
		//let donateParams = new URLSearchParams();
		let donateURL = "https://yoomoney.ru/quickpay/fundraise/button?";
		donateURL += "targets="+this.props.name;
		donateURL += "&default-sum="+this.props.amount;
		donateURL += "&button-text=12";
		donateURL += "&yoomoney-payment-type=on";
		donateURL += "&button-size=s";
		donateURL += "&button-color=orange";
		donateURL += "&quickpay=small";
		donateURL += "&account=4100116763942651";
		return (
			<div class="card" style={styles.card}>
				<img className="card-img" style={styles.donate_img} src={this.props.img ? this.props.img : 'События/черемша.gif'}/>
				<div className="card-body">
					<h5 className="card-title" style={styles.card_title}>{this.props.name ? this.props.name : '???'}</h5>
					<p className="card-text" style={styles.card_text}>
						{String(this.props.amount)+" руб."}
					</p>
				</div>
				<div style={(detect_mobile() ? styles.donate_input : {})}>
					<iframe style={{transform: (detect_mobile() ? "scale(2.75)" : "scale(1)")}} src={donateURL} height="40px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
				</div>
			</div>
		);
	}
}

class RulesBolder extends React.Component{
	render(){
		if (this.props.isEnough){
			if (detect_mobile()){
				return (
					<h4 className="rules-bolder" style={{fontSize: "70px"}}>{this.props.caption}</h4>
				);
			} else {
				return (
					<h4 className="rules-bolder">{this.props.caption}</h4>
				);
			}
			
		} else {
			<h4 className="rules-bolder">NULL</h4>
		}
	}
}

class Overlay extends React.Component {
	render(){
		function to_go(link){
			close_mobile_menu();
			window.location.href += "/../"+link;
		}

		let menus = [
			{
				"name": "Об игре",
				"link": "index.html",
				"badge": "info_badge.svg"
			},
			{
				"name": "Правила",
				"link": "Rules.html",
				"badge": "rules_badge.svg"
			},
			{
				"name": "Бравлеры",
				"link": "Brawlers.html",
				"badge": "brawlers_badge.webp"
			},
			{
				"name": "Режимы",
				"link": "Events.html",
				"badge": "events_badge.png"
			},
			{
				"name": "Пожертвовать",
				"link": "Donate.html",
				"badge": "donate_badge.svg"
			},
			{
				"name": "Игровая валюта",
				"link": "Currency.html",
				"badge": "currency_badge.svg"
			}
		];
		console.log(menus.slice(0, 3));
		return (
			<div>
				<div className="modal_overlay hidden" style={{display: "none"}}>
					<div className="modal_info_window hidden">
						<div className="modal_span">
							<h1 className="modal_title">О бравлере</h1>
							<div className="modal_close_btn" onClick={()=>{
								document.querySelector("div.modal_info_window").classList.add("hidden");
								document.querySelector("div.modal_overlay").classList.add("hidden");
								setTimeout(() => {
									document.querySelector("div.modal_overlay").style.display = "none";
								}, 550);
							}}>X</div>
						</div>
						<div className="modal_body">
							<div style={{display: "flex", margin: "10px", gap: "5px", border: "2px solid black"}}>
								<img className="modal_image" src=""/>
								<p className="modal_text">???</p>
							</div>
							<p className="modal_info">???</p>
						</div>
					</div>
					<div className="mobile_menu hidden">
						<h1 className="mobile_title">BЯAШL SТAЯS</h1>
						<div className="menu_close_btn" onClick={() => {close_mobile_menu();}}>X</div>
						<div className="mobile_btn_group" id="mobile_group">
							{
								menus.map((m) => (
									<div type="button" className="mobile_btn" onClick={() => {to_go(m.link);}}>
										<img className="mobile_btn_badge" src={"img/badges/"+m.badge}/>
										<p className="mobile_btn_text">{m.name}</p>
									</div>
								))
							}
						</div>
					</div>
				</div>
				{
					(detect_mobile() === false) ? (
						<div className="btn-group brawl_menu invs" role="group">
							{
								menus.map((m) => (
									<button type="button" className="btn btn-danger">
										<a href={m.link}>{m.name}</a>
									</button>
								))
							}
						</div>
					) : (
						<div></div>
					)
				}
				<div className="mobile_overlay">
					{
						menus.slice(0, 3).map((m) => (
							<div class="btn btn-danger mobile_menu_button" onClick={() => {to_go(m.link);}}>
							    <img class="mobile_button_badge" src={"img/badges/"+m.badge}/>
							    <p class="mobile_button_text">{m.name}</p>
							</div>
						))
					}
					<div class="btn btn-danger mobile_menu_button" onClick={() => {open_mobile_menu();}}>
	    				<img class="mobile_button_badge" src="img/badges/menu_badge.svg"/>
						<p class="mobile_button_text">Ещё...</p>
					</div>
				</div>
			</div>
		);
	}
}

class Welcome extends React.Component {
	render(){
		return (
			<h1>Привет {this.props.name}</h1>
		);
	}
}

// (new Date("2026-01-12 12:00:00") < new Date());
// (new Date() < new Date("2026-12-01 12:00:00"));