import { tap, noop, omit } from 'lodash/fp';
import webpIsSupported from 'lib/webpIsSupported';

// props we use in the component but don't want to pass down
const BLACKLISTED_PROPS = [
  'onWebpSupportDetermined',
];

const withWebpAwareness = (WrappedComponent) => class extends Component {
  state = {
    webpSupport: 'unknown',
  }
  componentDidMount() {
    webpIsSupported()
      .then(tap(this.setWebpSupport))
      .then(tap(this.props.onWebpSupportDetermined || noop));
  }
  setWebpSupport = (isSupported) => {
    this.setState({
      webpSupport: isSupported ? 'supported' : 'unsupported',
    });
  }
  render() {
    const attributes = omit(BLACKLISTED_PROPS, this.props);
    return <WrappedComponent {...attributes} {...this.state} />;
  }
};