import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import {
	NotificationBar,
	transparentize,
	color,
} from 'nixplay-ui-kit';
import { getBottomSpace } from 'react-native-iphone-x-helper';
import i18n from '~/locale/i18n';


class OfflineNotificationBar extends Component {
	static propTypes = {
		isConnected: PropTypes.bool.isRequired,
		stack: PropTypes.bool,
	}

	static defaultProps = {
		stack: false,
	}

	render() {
		return !this.props.isConnected ? (
			<NotificationBar
				{...this.props}
				extraStyle={this.props.stack ? {} : { bottom: 0, height: 48 + getBottomSpace() }}
				bgColor={transparentize(color.yellow, 5)}
				borderColor={color.transparent}
			>
				<NotificationBar.Text color="white">
					{i18n.t('common.noInternetConnection')}
				</NotificationBar.Text>
			</NotificationBar>
		) : null;
	}
}


const mapStateToProps = (state) => ({
	isConnected: state.network.isConnected,
});

export default connect(mapStateToProps, null)(OfflineNotificationBar);
