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

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

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

			{ isLocked ? (<span className="wemeet-pro-tag" onClick={openProModal}>{ langString('upcoming') }</span>) : ''}
			{ isUpcomming ? (<span className="wemeet-upcomming-tag">{ langString('upcoming') }</span>) : ''}

		  </div>
		</div>
	  </div>
	);
};
  
export default MhSwitcher;
  