import * as React from 'react';
import { ukPhoneNormalizer } from '../../../utils/helper';

import Header, { HeaderProps } from '../../../containers/header/Header';
import { Colors } from '../../../models/colors';
import { ServerMessage } from '../../../models/serverMsg';
import { Config } from '../../../models/config';
import { header, headerInnerWrapper, logo, phone, loginButton } from './headerOne.style';
import ServerMessageOne from '../../server-messages/server-message-one/ServerMessageOne';

type HeaderOneProps = HeaderProps & {
	progressBar: JSX.Element;
	translator?: Function;
};

export default class HeaderOne extends React.PureComponent<HeaderOneProps> {
	render() {
		return (
			<Header
				{...this.props}
				render={(
					palette: Colors,
					serverMessage?: ServerMessage,
					removeErrorMessage?: () => void,
					config?: Config
				) => {
					palette = palette || this.props.palette;
					config = config || this.props.config;
					let phoneNormalizer = ukPhoneNormalizer(config.vendorPhoneNumber);
					return (
						<React.Fragment>
							<div className={header(palette)}>
								<div className={headerInnerWrapper()} data-automation={this.props.automationName}>
									<img
										className={logo()}
										src={require('vendor/assets/images/logo/logo.svg')}
										alt="logo"
										onClick={() => {
											location.reload();
										}}
									/>
									<a className={phone(palette)} href={phoneNormalizer.foreignPhone}>
										{phoneNormalizer.ukPhone}
									</a>
									<button className={loginButton(palette)}>
										{this.props.translator(`header.login`)}
									</button>
								</div>
								{React.cloneElement(this.props.progressBar, {
									palette,
									translator: this.props.translator,
									currentStepID: this.props.currentStepID
								})}
							</div>
							<ServerMessageOne
								serverMessage={serverMessage}
								palette={palette}
								removeErrorMessage={removeErrorMessage}
							/>
						</React.Fragment>
					);
				}}
			/>
		);
	}
}