import * as React from 'react';
import { Colors } from '../../models/colors';

export interface ModalProps {
	palette?: Colors;
	title?: string;
	onRef?: (ref: any) => any;
	translator?: Function;
}

interface ModalState {
	opened: boolean;
}

type ModalContainer = ModalProps & {
	render: (opened: boolean, close: () => void) => JSX.Element;
};

class Modal extends React.Component<ModalContainer, ModalState> {
	state = {
		opened: false
	};

	componentDidMount() {
		this.props.onRef(this);
	}

	componentWillUnmount() {
		this.props.onRef(undefined);
	}

	open = () => {
		if (this.state.opened) return;

		this.setState({
			opened: true
		});
		document.body.style.overflow = 'hidden';
	};

	close = () => {
		this.setState({
			opened: false
		});
		document.body.style.overflow = 'auto';
	};

	render() {
		return this.props.render(this.state.opened, this.close);
	}
}

export default Modal;