import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import moment from 'moment';

import I18n from '../../i18n';
import Item from './Item';

const Timezone = ({ utcOffset, Message_TimeFormat, theme }) => (utcOffset ? (
	<Item
		label={I18n.t('Timezone')}
		content={`${ moment().utcOffset(utcOffset).format(Message_TimeFormat) } (UTC ${ utcOffset })`}
		theme={theme}
	/>
) : null);
Timezone.propTypes = {
	utcOffset: PropTypes.number,
	Message_TimeFormat: PropTypes.string,
	theme: PropTypes.string
};

const mapStateToProps = state => ({
	Message_TimeFormat: state.settings.Message_TimeFormat
});

export default connect(mapStateToProps)(Timezone);