import * as PropTypes from ‘prop-types’; import React from ‘react’; import { Banner, TextStyle } from ‘@shopify/polaris’;

const ErrorBanner = ({ errors, prologue }) => {

const errorKeys = () => Object.keys(errors).sort();

const errorCount = () => errorKeys().length;

const errorMessage = () => {
  let msg = '1 field needs changes';

  if (errorCount() > 1) {
    msg = `${errorCount()} fields need changes`;
  }

  return msg;
};

const separator = index => {
  if (index === 0) return ' ';

  if (index === errorCount() - 1) return ' and ';

  return ', ';
};

if (errorCount() === 0) return null;

return (
  <Banner status="critical">
    <p>
      {prologue},{errorMessage()}:
      {errorKeys().map((key, index) => (
        <span>
          {separator(index)}
          <TextStyle key="error-{index}" variation="strong">
            {key}
          </TextStyle>
        </span>
      ))}
      .
    </p>
  </Banner>
);

};

ErrorBanner.defaultProps = {

errors: {},
prologue: 'To save this form'

};

ErrorBanner.propTypes = {

errors: PropTypes.shape({}),
prologue: PropTypes.string

};

export default ErrorBanner;