import React from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import './scss/cssScroll.scss';

export default class Scroll extends React.Component {
  /* state = {
    scrollType: null,
  } */
  constructor(props, context) {
    super(props, context);

    const supportsCSS = (property, value) => {
      const element = document.createElement('div');
      if (element.style[property] !== undefined) {
        element.style.cssText = `${property}:${value}`;
      } else {
        return false;
      }
      return element.style[property] === value;
    };

    const scrollType = supportsCSS('overscroll-behavior', 'contain')
      ? 'css'
      : 'library';

    this.state = {
      scrollType: props.type || scrollType,
    };
  }

  componentDidMount() {
    /* if (!this.state.scrollType) {
      const supportsCSS = (property, value) => {
        const element = document.createElement('div');
        if (element.style[property] !== undefined) {
          element.style.cssText = property + ':' + value;
        } else {
          return false;
        }
        return element.style[property] === value;
      };
      const scrollType = supportsCSS('overscroll-behavior', 'contain')
        ? 'css'
        : 'library';
      this.setState({ scrollType });
    } */
  }

  renderScroll = () => {
    const { children, ...restProps } = this.props;
    const { scrollType } = this.state;
    if (scrollType === 'css') {
      return <div
        style={{ height: '100%' }}
        className='omni-layout-cssScrollbar'
      >
        {children}
      </div>;
    }
    return <Scrollbars
      renderThumbHorizontal={() => <div className='omni-thumb-horizontal'/>}
      renderThumbVertical={() => <div className='omni-thumb-vertical'/>}
      {...restProps}
    >
      {children}
    </Scrollbars>;
  }

  render() {
    /* const { scrollType } = this.state;
    const { children, ...restProps } = this.props; */
    return this.renderScroll();
  }
}