import { css } from 'glamor';
import React from 'react';
import { Feedback } from '../components/common/feedback/Feedback';
import { observer } from 'mobx-react';
import { AppBase } from '../app/AppBase';

/**
 * An observer component that renders the feedback component
 * when the feedback is open - this is to be used in the root
 * of the app - You probably don't need to use this component
 * directly if you are using the ApphouseApp component
 * @private package internal
 */
export const AppFeedback: React.FC<{ app: AppBase }> = observer(({ app }) => {
  const { feedback } = app;
  const show = feedback.open;
  if (show) {
    return (
      <div
        {...css({
          alignItems: 'center',
          display: 'flex',
          height: 0,
          justifyContent: 'center',
          position: 'fixed',
          top: 0,
          width: '100%',
          zIndex: 1000
        })}
      >
        <Feedback
          type={feedback.type}
          position={feedback.position}
          variant={feedback.variant}
          open={feedback.open}
          onClose={() => {
            feedback.onClose();
          }}
          dismissButtonLabel={feedback.dismissButtonLabel}
          showLoader={feedback.showLoader}
          message={feedback.message}
        />
      </div>
    );
  }
  return null;
});