const { __ } = wp.i18n;
import { useMhubAdmin } from "../../../App/MhubAdminContext";
import { langString } from "../../../Helpers";

const MhSwitcher = ({ label, description, checked, onChange, name, disabled, isLocked, isUpcomming = false, isNew = false }) => {
	const { openProModal } = useMhubAdmin();

	return (
		<div className="mhub-form-group">
			<label>
				{label}
				{description && <small className="description">{description}</small>}
			</label>
			<div className="input-wrapper">
				<div className={`mhub-switch-field ${disabled ? 'disabled' : ''}`}>
					<input
						type="checkbox"
						id={name}
						checked={checked}
						onChange={() => onChange(name, !checked)}
						disabled={disabled}
					/>
					<label htmlFor={name} className={`${isLocked ? 'mhub-locked' : ''}`}  {...(disabled && !isUpcomming && { onClick: openProModal })}></label>

					{isLocked ? (<span className="mhub-pro-tag" onClick={openProModal}>{langString('pro')}</span>) : ''}
					{isUpcomming ? (<span className="mhub-upcomming-tag" style={{ marginLeft: (isLocked || isNew) ? '10px' : '0px' }}>{langString('upcoming') || 'Upcoming'}</span>) : ''}
					{isNew ? (<span className="mhub-new-tag" style={{ marginLeft: (isLocked || isUpcomming) ? '10px' : '0px' }}>{langString('new')}</span>) : ''}

				</div>
			</div>
		</div>
	);
};

export default MhSwitcher;
