import * as React from "react";
import { Component } from 'react';

import { styleSheet } from '../../StyleSheet';

const styles = styleSheet(require('./ShadowedScrollBox.module.scss'));

const Inner = styles.element(['inner']);
const Outer = styles.element(['outer', 'shadowed-scroll']);

const Overlay = styles.element(['overlay']);

const HiderTop = styles.element(['hider-top']);
const HiderBottom = styles.element(['hider-bottom']);

type HeightMode = 'flex' | 'watched';
export const HeightModeContext = React.createContext<HeightMode>('flex');

export class ShadowedScroll extends Component<{ inner?: React.HTMLProps<HTMLDivElement>, outer?: React.HTMLProps<HTMLDivElement> }> {
    static contextType = HeightModeContext;
    context: React.ContextType<typeof HeightModeContext>

    static readonly stylesheet = styles;

    render() {
        const { outer: outerProps = {}, inner: innerProps = {}, children } = this.props;

        if (this.context == 'watched') {
            return <div style={{ padding: '2rem 1rem' }} children={children} />
        }

        // Using a CSS background approach is simpler and smoother, but renders below any contained objects
        const useCSSBackground = false;
        if (useCSSBackground) {
            return <Outer {...outerProps} className={styles(['background-method'])}>
                <Inner {...innerProps}>
                    {children}
                </Inner>
            </Outer>
        } else {
            return <Outer className={styles(['overlay-method'])}>
                <Overlay />
                <Outer {...outerProps}>
                    <Inner {...innerProps}>
                        <HiderTop />
                        <HiderBottom />
                        {children}
                    </Inner>
                </Outer>
            </Outer>
        }
    }
}