import React, { Component } from 'react';
import PropTypes, { func } from 'prop-types';
import autobind from 'autobind-decorator';
import HeaderSearchFieldContainer from './HeaderSearchFieldContainer';
import reduxLang from '../../middleware/lang';
import BurgerBtnContainer from '../AppMenu/BurgerBtnContainer';
import { useSelector } from 'react-redux'
import { connect } from 'react-redux';

@autobind
class _ContentHeader extends Component {
	constructor(props) {
		super(props);
		this.state = {
			searching: false
		};
	}

	toggleSearching() {
		this.setState({ searching: !this.state.searching });
	}

	render() {
		const { searching } = this.state;
		const { isPreLaunch, color, scrollingText } = this.props;
		return searching ? (
			<div className='ContentHeader'>
				<HeaderSearchFieldContainer closeFunc={this.toggleSearching} />
			</div>
		) : (
			<>
				<div className="marquee" style={{backgroundColor: color}}>
					<div className="marquee__inner" aria-hidden="true">
						<span>{scrollingText}</span>
					</div>
				</div>
				<div className='ContentHeader'>
					<HeaderIcon />
					<BurgerBtnContainer />
					<HeaderTitle />
					{!isPreLaunch && <HeaderSearchBtn handler={this.toggleSearching} />}
				</div>
			</>
		);
	}
}

const mapStateToProps = state => {
	return {
		color: state.urls.color,
		scrollingText: state.urls.scrollingText
	};
};
const ContentHeader = connect(mapStateToProps)(_ContentHeader);
export default ContentHeader;

function HeaderIcon() {
	const currentSite = useSelector(state => state.urls.site);
	const allSites = Object.getOwnPropertyNames(useSelector(state => state.urls.allSites))
	const siteID = allSites.findIndex((siteName) => siteName === currentSite) + 1;
	return <h1 className='HeaderIcon big-text'>&#x2116; {siteID}</h1>;
}


const getTitle = t => {
	if ('ontouchstart' in window || navigator.msMaxTouchPoints > 0) {
		return 'Fundbüro № 1';
	} else {
		return t('skiing');
	}
};

function _HeaderTitle({ t }) {
	const siteName = useSelector(state => state.urls.name);
	return <h1 className='HeaderTitle big-text'>{siteName}</h1>;
}
_HeaderTitle.propTypes = {
	t: PropTypes.func.isRequired
};
const HeaderTitle = reduxLang('HeaderTitle')(_HeaderTitle);

const HeaderSearchBtn = ({ handler }) => (
	<div className='HeaderSearchBtn'>
		<button onClick={handler}>
			<img src='/static/gfx/alps_lupe.svg' alt='search' />
		</button>
	</div>
);

HeaderSearchBtn.propTypes = {
	handler: PropTypes.func.isRequired
};