text: import { Context as ConditionsContext, ConditionsProvider } from '../../context/conditions';
  import { Button, Dialog } from '@elementor/app-ui';
  import ConditionType from './condition-type';
  import ConditionName from './condition-name';
  import ConditionSub from './condition-sub';
  import ConditionSubId from './condition-sub-id';
  import ConditionConflicts from './condition-conflicts';
  
  export default function ConditionsRows( props ) {
  	const {
  		conditions,
  		createConditionItemInState: create,
  		updateConditionItemState: update,
  		removeConditionItemInState: remove,
  		saveConditions: save,
  		action,
  		resetActionState,
  	} = React.useContext( ConditionsContext );
  
  	const rows = Object.values( conditions ).map( ( condition ) =>
  		<div key={ condition.id }>
  			<div className="e-site-editor-conditions__row">
  				<div
  					className={ `e-site-editor-conditions__row-controls ${ condition.conflictErrors.length && 'e-site-editor-conditions__row-controls--error' }` }>
  					<ConditionType { ...condition } updateConditions={ update }/>
  					<div className="e-site-editor-conditions__row-controls-inner">
  						<ConditionName { ...condition } updateConditions={ update }/>
  						<ConditionSub { ...condition } updateConditions={ update }/>
  						<ConditionSubId { ...condition } updateConditions={ update }/>
  					</div>
  				</div>
  				<Button
  					className="e-site-editor-conditions__remove-condition"
  					text={ __( 'Delete', 'elementor-pro' ) }
  					icon="eicon-close"
  					hideText={ true }
  					onClick={ () => remove( condition.id ) }
  				/>
  			</div>
  			<ConditionConflicts conflicts={ condition.conflictErrors }/>
  		</div>,
  	);
  
  	const isSaving = action.current === ConditionsProvider.actions.SAVE && action.loading;
  
  	return (
  		<>
  			{
  				action.error &&
  				<Dialog
  					text={ action.error }
  					dismissButtonText={ __( 'Go Back', 'elementor-pro' ) }
  					dismissButtonOnClick={ resetActionState }
  					approveButtonText={ __( 'Learn More', 'elementor-pro' ) }
  					approveButtonColor="link"
  					approveButtonUrl="https://go.elementor.com/app-theme-builder-conditions-load-issue"
  					approveButtonTarget="_target"
  				/>
  			}
  			<div className="e-site-editor-conditions__rows">
  				{ rows }
  			</div>
  			<div className="e-site-editor-conditions__add-button-container">
  				<Button
  					className="e-site-editor-conditions__add-button"
  					variant="contained"
  					size="lg"
  					text={ __( 'Add Condition', 'elementor-pro' ) }
  					onClick={ create }
  				/>
  			</div>
  			<div className="e-site-editor-conditions__footer">
  				<Button
  					variant="contained"
  					color="primary"
  					size="lg"
  					hideText={ isSaving }
  					icon={ isSaving ? 'eicon-loading eicon-animation-spin' : '' }
  					text={ __( 'Save & Close', 'elementor-pro' ) }
  					onClick={ () => save().then( props.onAfterSave ) }
  				/>
  			</div>
  		</>
  	);
  }
  
  ConditionsRows.propTypes = {
  	onAfterSave: PropTypes.func,
  };
  