import * as React from 'react';
import { Colors } from '../../models/colors';
import { Config } from '../../models/config';
import { ServerMessage } from '../../models/serverMsg';
import { hiddenBlockStyle, header } from './header.style';

export interface HeaderProps {
	automationName?: string;
	palette?: Colors;
	config?: Config;
	currentStepID?: number;
}

type HeaderContainer = HeaderProps & {
	removeErrorMessage?: () => void;
	serverMessage?: ServerMessage;
	render: (
		palette: Colors,
		serverMessage?: ServerMessage,
		removeErrorMessage?: () => void,
		config?: Config
	) => JSX.Element;
};

interface HeaderState {
	height: number;
}

class Header extends React.Component<HeaderContainer, HeaderState> {
	private headerRef: React.RefObject<HTMLElement>;
	constructor(props: HeaderContainer) {
		super(props);
		this.state = {
			height: 0
		};
		this.headerRef = React.createRef();
	}

	componentDidMount() {
		if (this.headerRef.current) {
			this.setState({
				height: this.headerRef.current.clientHeight
			});
		}
	}

	render() {
		return (
			<React.Fragment>
				<header className={header()} ref={this.headerRef}>
					{this.props.render(
						this.props.palette,
						this.props.serverMessage,
						this.props.removeErrorMessage,
						this.props.config
					)}
				</header>
				<div className={hiddenBlockStyle()} />
			</React.Fragment>
		);
	}
}

export default Header;