import styled from 'styled-components';
import React from 'react';
import { bool, string, node } from 'prop-types';
import { SCROLLBARS_MIN, SCROLLBARS_MIN_LIGHT, SCROLLBARS_MIN_HIDDEN, SCROLLBARS_APP } from '@vincent_za/styles';

function ScrollHOC(WrappedComponent) {
  const Wrap = styled(WrappedComponent)`
    overflow: auto;
    ${props => props.isAppElement ? `
      overflow-x: hidden;
      ${!props.isTouchDevice && SCROLLBARS_APP};` : `${!props.isTouchDevice && SCROLLBARS_MIN_HIDDEN};`};

    &:hover {
      ${props => !props.isTouchDevice && !props.isAppElement && SCROLLBARS_MIN};
      ${props => !props.isTouchDevice && !props.isAppElement && props.isLightScrollVariant && SCROLLBARS_MIN_LIGHT};
    };

    ${props => (props.isNoOverflow || props.isOverflowX || props.isOverflowY) && 'overflow: hidden'};
    ${props => props.isOverflowY && 'overflow-y: auto'};
    ${props => props.isOverflowX && 'overflow-x: auto'};
  `;

  return class Scroll extends React.PureComponent {
    static propTypes = {
      isAppElement: bool,
      isTouchDevice: bool.isRequired,
      isLightScrollVariant: bool,
      isNoOverflow: bool,
      isOverflowX: bool,
      isOverflowY: bool,
      className: string,
      children: node.isRequired,
    };

    static defaultProps = {
      isAppElement: false,
      isLightScrollVariant: false,
      isNoOverflow: false,
      isOverflowX: false,
      isOverflowY: false,
      className: undefined,
    };

    render() {
      const {
        isAppElement,
        isTouchDevice,
        isLightScrollVariant,
        isNoOverflow,
        isOverflowX,
        isOverflowY,
        className,
        children,
      } = this.props;
      return (
        <Wrap
          isAppElement={isAppElement}
          isTouchDevice={isTouchDevice}
          isLightScrollVariant={isLightScrollVariant}
          isNoOverflow={isNoOverflow}
          isOverflowX={isOverflowX}
          isOverflowY={isOverflowY}
          className={className}
          {...this.props}
          ref={this.props.passedRef}
        >
          {children}
        </Wrap>
      );
    }
  };
}

export default ScrollHOC;
