import { Button, Icon } from '@wordpress/components';
import { caution, check, cautionFilled } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';

export default function SaveBar( { isDirty, isSaving, isResetting, onSave, onDiscard, onReset, notice } ) {
	return (
		<div className="wuppi-save-bar">
			<div className="wuppi-save-bar__actions">
				<Button variant="tertiary" onClick={ onReset } disabled={ isSaving || isResetting }>
					{ __( 'Reset to defaults', 'wuppi' ) }
				</Button>
				<Button variant="secondary" onClick={ onDiscard } disabled={ ( ! isDirty && ! isResetting ) || isSaving }>
					{ __( 'Discard changes', 'wuppi' ) }
				</Button>
				<Button
					variant="primary"
					className={ isResetting ? 'wuppi-confirm-reset' : undefined }
					onClick={ onSave }
					isBusy={ isSaving }
					disabled={ ( ! isDirty && ! isResetting ) || isSaving }
				>
					{ isSaving
						? __( 'Saving…', 'wuppi' )
						: isResetting
						? __( 'Confirm reset', 'wuppi' )
						: __( 'Save changes', 'wuppi' ) }
				</Button>
			</div>
			{ isResetting && (
				<p className="wuppi-save-bar__inline-message wuppi-save-bar__inline-message--warning">
					<Icon icon={ caution } size={ 16 } />
					{ __( 'All settings will be reset to defaults. Click "Confirm reset" to apply, or "Discard changes" to cancel.', 'wuppi' ) }
				</p>
			) }
			{ notice && ! isResetting && (
				<p className={ `wuppi-save-bar__inline-message wuppi-save-bar__inline-message--${ notice.type }` }>
					<Icon icon={ notice.type === 'error' ? cautionFilled : check } size={ 16 } />
					{ notice.message }
				</p>
			) }
		</div>
	);
}
