import {useMemo, useRef, useState} from 'react';
import renderHtmlAttributes from "../../utils/renderHtmlAttributes";
import useFormSubmitSuccess from "../../hooks/useFormSubmitSuccess";
import type {FreemiusProps} from "../../types/freemius";
import UpgradeOverlay from "../../components/UpgradeOverlay";

type FieldProps = {
	itemId: string
	formId: string
	attrs: Record<string, string | string[]>
	style: 'material' | 'ios' | 'carbon'
	layout: 'default' | 'inline'
	onValue: string
	offValue: string
	onValueLabel: string
	offValueLabel: string
	defaultState: boolean
	labelsVisibility: 'hide' | 'show-both-labels' | 'show-active-label'
	handleIcon: string
} & FreemiusProps

const Field = (props: FieldProps) => {

	const inputRef = useRef<HTMLInputElement>(null);
	const attrs = useMemo(() => renderHtmlAttributes(props.attrs), [props.attrs]);

	const initialValue = useMemo(() => {
		return props.defaultState ? props.onValue : props.offValue;
	}, [props.defaultState, props.offValue, props.onValue]);

	const [value, setValue] = useState(initialValue);

	// Reset after form submit
	useFormSubmitSuccess(inputRef, () => {
		setValue(initialValue);
	}, [initialValue]);

	const id = useMemo(() => {
		return `form-field-${props.formId}-${props.itemId}`;
	}, [props.formId, props.itemId]);

	const isShowBothLabels = useMemo(() => {
		return props.labelsVisibility === 'show-both-labels';
	}, [props.labelsVisibility]);

	const isShowActiveLabel = useMemo(() => {
		return props.labelsVisibility === 'show-active-label';
	}, [props.labelsVisibility]);

	const showActiveLabel = useMemo(() => {
		if (value === props.onValue) {
			return props.onValueLabel;
		} else if (value === props.offValue) {
			return props.offValueLabel;
		}
		return value;
	}, [props.offValue, props.offValueLabel, props.onValue, props.onValueLabel, value]);

	const showActiveValue = useMemo(() => {
		if (value === props.onValue) {
			return props.onValue;
		} else if (value === props.offValue) {
			return props.offValue;
		}
		return value;
	}, [props.offValue, props.onValue, value]);

	const showActiveLabelId = useMemo(() => {
		if (value === props.onValue) {
			return 'off';
		} else if (value === props.offValue) {
			return 'on';
		}
		return 'on';
	}, [props.offValue, props.onValue, value]);

	const handleIcon = useMemo(() => {
		try {
			return decodeURIComponent(props.handleIcon);
		} catch {
			return props.handleIcon;
		}
	}, [props.handleIcon]);

	return (
		<>
			{!props.freemius.can_use_premium_code && <UpgradeOverlay url={props.freemius.get_upgrade_url}/>}
			<div className={`hulk-toggle-field hulk-toggle-field--${props.style} elementor-field-subgroup`}>
				<input
					{...attrs}
					type="radio"
					ref={inputRef}
					className="hulk-toggle-field__input hulk-toggle-field__input--on"
					id={`${id}-on`}
					value={props.onValue}
					checked={value === props.onValue}
					onChange={event => {
						if (!props.freemius.can_use_premium_code) {
							return;
						}
						setValue(event.target.value)
					}}
				/>
				<input
					{...attrs}
					type="radio"
					ref={inputRef}
					className="hulk-toggle-field__input hulk-toggle-field__input--off"
					id={`${id}-off`}
					value={props.offValue}
					checked={value === props.offValue}
					onChange={event => {
						if (!props.freemius.can_use_premium_code) {
							return;
						}
						setValue(event.target.value)
					}}
				/>
				{isShowBothLabels && (
					<label htmlFor={`${id}-off`}
						   className="hulk-toggle-field__label hulk-toggle-field__label--off">
						{props.offValueLabel}
					</label>
				)}
				<div className="hulk-toggle-field__control">
					<div className="hulk-toggle-field__track"></div>
					<div className={`hulk-toggle-field__handle hulk-toggle-field__handle-${showActiveValue}`}
						 dangerouslySetInnerHTML={{__html: handleIcon}}
					></div>
					<label
						htmlFor={`${id}-on`}
						className="hulk-toggle-field__trigger hulk-toggle-field__trigger--on"
					>{props.onValueLabel}</label>
					<label
						htmlFor={`${id}-off`}
						className="hulk-toggle-field__trigger hulk-toggle-field__trigger--off"
					>{props.offValueLabel}</label>
				</div>
				{(isShowBothLabels || isShowActiveLabel) && (
					<label
						htmlFor={isShowActiveLabel ? `${id}-${showActiveLabelId}` : `${id}-on`}
						className="hulk-toggle-field__label hulk-toggle-field__label--on"
					>
						{isShowActiveLabel ? (
							<>{showActiveLabel}</>
						) : (
							<>{props.onValueLabel}</>
						)}
					</label>
				)}
			</div>
		</>
	);
};

export default Field;