class FooterGobeu extends React.Component {
	static contextType = FooterContext

	constructor(props) {
		super(props)

		this.state = {
			name: '',
			mail: '',
			chBox_1: false,
			chBox_2: true,
			errs: [],
			errorText: '',
			confirmation: '',
			cook: '',
		}
	}

	componentDidMount() {
		var chCook = $.cookie(this.context.cook_name)

		if (!chCook || chCook !== 'ok') this.setState({ cook: 'act' })
	}

	#change = ({ target: { value: v } }, inp) => {
		this.setState(pr => {
			pr[inp] = v

			return pr
		})
	}

	#chBox = (ch, { target: { tagName: T } }) => {
		if ('A' != T)
			this.setState(pr => {
				pr[`chBox_${ch}`] = !pr[`chBox_${ch}`]

				return pr
			})
	}

	#formSubmit = () => {
		let { form_err_policy, form_err_inp, form_err_incor } = this.context,
			{ name, mail, chBox_1, chBox_2 } = this.state,
			errs = [],
			rg =
				/^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu
		if (!chBox_1) {
			errs.push('policy')
			this.setState({ errorText: form_err_policy })
		}

		// Проверка имени
		if (name.trim() === '') {
			errs.push('name')
			this.setState({ errorText: form_err_inp })
		}

		// Проверка email
		if (mail.trim() === '' || !rg.test(mail)) {
			errs.push('mail')
			this.setState({ errorText: form_err_incor })
		}

		// Очистка ошибки, если ошибок больше не осталось
		if (errs.length === 0) {
			this.setState({ errorText: '' })
		}
		// Сохранение ошибок в состоянии
		this.setState({ errs })

		// Если есть ошибки, прекращаем выполнение
		if (errs.length > 0) {
			this.setState({ errs })
			return
		}

		fetch(
			'/staging/wp-content/themes/healbe/blocks/lazyblock-footer-gobeu/getresponse-footer-gobeu.php',
			{
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify({
					lg: 'ru',
					name: name,
					mail: mail,
					check: chBox_1,
					checkSub: chBox_2,
				}),
			}
		)
			.then(resp => {
				this.setState({ confirmation: 'conf' })

				console.log(resp)
			})
			.catch(error => {
				console.error('Ошибка при отправке данных:', error)
			})
	}

	render() {
		let {
				menu_title,
				menu,
				copyright,
				title_apps,
				android_app,
				ios_app,
				social_title,
				links,
				form_title,
				form_input_name,
				form_input_mail,
				form_ch_1,
				form_ch_2,
				button_join,
				submit_ok,
				cookie_title,
				cookie_text,
				mobile_cookie_text,
				cookie_link,
				button_settings,
				button_consent,
				cook_name,
			} = this.context,
			{ name, mail, chBox_1, chBox_2, errorText, errs, confirmation, cook } =
				this.state,
			cookAgree = cook => {
				$.cookie(cook, 'ok', { path: '/' })
				$('.check-cookie-policy').hide()
			}

		return (
			<>
				<div className='footer-content'>
					<div className='row'>
						<div className='left'>
							<div className='title'> {menu_title} </div>

							<div className='menu'>
								{menu.map(({ lb, url }) => (
									<a href={url}>{lb}</a>
								))}
							</div>
						</div>

						<div className='center'>
							<div className='app-block'>
								<div className='title'>{title_apps}</div>

								<a className='app android' target='_blank' href={android_app} />

								<a className='app ios' target='_blank' href={ios_app} />
							</div>
							<div className='social-block'>
								<div className='title'>{social_title}</div>

								<div className='links'>
									{links.map(({ resurs: r, url: h }) => (
										<a href={h} className={r} target='_blank' />
									))}
								</div>
								<div></div>
							</div>
						</div>

						<div className={'form ' + confirmation}>
							<div className='title'>{form_title}</div>

							<div className='confirmation'>{submit_ok}</div>
							<input
								className={errs.includes('name') ? 'error' : ''}
								type='text'
								onChange={ev => {
									this.#change(ev, 'name')
								}}
								value={name}
								placeholder={form_input_name}
							/>

							<input
								className={errs.includes('mail') ? 'error' : ''}
								type='text'
								onChange={ev => {
									this.#change(ev, 'mail')
								}}
								value={mail}
								placeholder={form_input_mail}
							/>

							<div
								className={
									chBox_1
										? 'check-box checked'
										: 'check-box ' + (errs.includes('policy') ? 'error' : '')
								}
								onClick={ev => {
									this.#chBox(1, ev)
								}}
								dangerouslySetInnerHTML={{
									__html: '<span></span>' + '<p>' + form_ch_1 + '</p>',
								}}
							/>

							<div
								className={chBox_2 ? 'check-box checked' : 'check-box'}
								onClick={ev => {
									this.#chBox(2, ev)
								}}
								dangerouslySetInnerHTML={{
									__html: '<span></span>' + '<p>' + form_ch_2 + '</p>',
								}}
							/>

							<div className='err'>{errorText}</div>

							<div
								onClick={this.#formSubmit}
								className={'subscribe-btn mobile ' + confirmation}
							>
								{button_join}
							</div>
						</div>
					</div>

					<div className='row bottom'>
						<div className='left-bottom'>
							<div className='logo' />

							<div
								className='copy'
								dangerouslySetInnerHTML={{ __html: copyright }}
							/>
						</div>

						<div className='form'>
							<div
								onClick={this.#formSubmit}
								className={'subscribe-btn decktop ' + confirmation}
							>
								{button_join}
							</div>
						</div>
					</div>
				</div>

				<div className={'check-cookie-policy ' + cook}>
					<div className='mask'></div>
					<div className='cookie-substrate'>
						<div className='cookie-wrapper'>
							<div class='cookie-flex'>
								<div className='cookie-info'>
									<div className='decktop-txt'>
										<p className='info-title'> {cookie_title} </p>
										<p className='info-text'>
											{cookie_text}
											<a className='link' href={cookie_link}>
												{button_settings}
											</a>
										</p>
									</div>
									<div className='mobile-txt'>
										<p className='info-text_mobile'>{mobile_cookie_text}</p>
									</div>
								</div>
								<div
									className='yes-btn decktop'
									onClick={() => cookAgree(cook_name)}
								>
									{button_consent}
								</div>

								<div className='mobile-btn-block'>
									<div
										className='yes-btn mobile'
										onClick={() => cookAgree(cook_name)}
									>
										{button_consent}
									</div>

									<a class='set-up-btn' href={cookie_link} target='_blank'>
										{button_settings}
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</>
		)
	}
}

ReactDOM.render(<FooterGobeu />, document.getElementById('footer-gobeu'))