import CreatableSelect from 'react-select/creatable';
import { useMhubAdmin } from '../../../App/MhubAdminContext';
import { langString, select2Styles } from '../../../Helpers';

const MhCreatableSelect = ({ 
	label, 
	description, 
	value, 
	onChange, 
	placeholder,
	disabled, 
	isLocked, 
	isNew = false,
	isMulti = true,
	styles = select2Styles()
}) => {
	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-select2-wrapper ${disabled ? 'disabled' : ''}`}>
					<CreatableSelect
						isMulti={isMulti}
						placeholder={placeholder}
						value={value}
						onChange={onChange}
						styles={styles}
						isDisabled={disabled}
						className={disabled ? 'mhub-select2-field mhub-locked' : 'mhub-select2-field'}
					/>
					{disabled && <div className="mhub_disabled" onClick={openProModal}></div>}
					{isLocked && <span className="mhub-pro-tag" onClick={openProModal}>{langString('pro')}</span>}
					{isNew && <span className="mhub-new-tag" style={{ marginLeft: isLocked ? '10px' : '0px' }}>{langString('new')}</span>}
				</div>
			</div>
		</div>
	);
};

export default MhCreatableSelect;