// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import styled from 'styled-components';

type Props = {
  shadow?: boolean,
};

@observer
class Scrollable extends React.Component<Props> {
  @observable shadow: boolean = false;

  handleScroll = (ev: SyntheticMouseEvent<*>) => {
    this.shadow = !!(this.props.shadow && ev.currentTarget.scrollTop > 0);
  };

  render() {
    const { shadow, ...rest } = this.props;

    return (
      <Wrapper onScroll={this.handleScroll} shadow={this.shadow} {...rest} />
    );
  }
}

const Wrapper = styled.div`
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  box-shadow: ${props =>
    props.shadow ? '0 1px inset rgba(0,0,0,.1)' : 'none'};
  transition: all 250ms ease-in-out;
`;

export default Scrollable;