import * as React from 'react';

import { ParallaxBackgroundProps } from '../types/component';

export interface ParallaxBackgroundState {
  darken?: string | number;
  background?: string;
}

class ParallaxBackground extends React.Component<
  ParallaxBackgroundProps,
  ParallaxBackgroundState
> {
  constructor(props: ParallaxBackgroundProps) {
    super(props);
    this.state = {};
    this.handleDarkenPreviewChange = this.handleDarkenPreviewChange.bind(this);
    this.commitDarken = this.commitDarken.bind(this);
    this.handleBackgroundPreviewChange = this.handleBackgroundPreviewChange.bind(
      this
    );
    this.commitBackground = this.commitBackground.bind(this);
  }

  render() {
    const { Controls, readOnly, Renderer } = this.props;
    return (
      <>
        {!readOnly ? (
          <Controls
            {...this.props}
            state={{
              ...this.props.state,
              darken: this.state.darken
                ? this.state.darken
                : this.props.state.darken,
              background: this.state.background
                ? this.state.background
                : this.props.state.background,
            }}
            handleDarkenPreviewChange={this.handleDarkenPreviewChange}
            commitDarken={this.commitDarken}
            handleBackgroundPreviewChange={this.handleBackgroundPreviewChange}
            commitBackground={this.commitBackground}
          />
        ) : null}
        <Renderer {...this.props} />
      </>
    );
  }

  private handleDarkenPreviewChange(darken: number | string) {
    this.setState({ darken });
  }

  private commitDarken() {
    this.props.onChange({ darken: this.state.darken });
    this.setState({ darken: undefined });
  }

  private handleBackgroundPreviewChange(background: string) {
    this.setState({ background });
  }

  private commitBackground() {
    this.props.onChange({ background: this.state.background });
    this.setState({ background: undefined });
  }
}

export default ParallaxBackground;