import React from 'react';
import { View, SectionList } from 'react-native';
import { connect } from 'react-redux';
import { Text, color } from 'nixplay-ui-kit';

import { releaseNotes } from './releaseNotes';


const styles = {
	container: {
		backgroundColor: '#FFFFFF',
		flex: 1,
	},
	sectionHeader: {
		paddingVertical: 5,
		paddingHorizontal: 20,
		backgroundColor: color.wrikeBg,
		justifyContent: 'space-between',
		flexDirection: 'row',
		flex: 1,
	},
	listDetail: {
		marginVertical: 5,
		paddingHorizontal: 20,
	},
	versionControlUI: {
		justifyContent: 'center',
		alignItems: 'center',
	},
};

class ReleaseNotesContainer extends React.Component {
	// eslint-disable-next-line react/sort-comp
	static navigationOptions = {
		// title: i18n.t('common.releaseNotes'),
		title: 'Released Notes',
	};

	constructor(props) {
		super(props);
		const releaseData = Object.keys(releaseNotes).map((key) => (
			{
				data: releaseNotes[key].RELEASE_NOTE,
				version: releaseNotes[key].RELEASE_VERSION,
				date: releaseNotes[key].RELEASE_DATE,
			}
		));
		this.keyExtractor = (item, index) => `key-${index}`;
		this.state = { releaseData };
	}

	render() {
		return (
			<View style={styles.container}>
				<SectionList
					renderItem={({ item }) => <View style={styles.listDetail}><Text style={{ fontSize: 12, color: '#0e4c7d' }}>- {item}</Text></View>}
					renderSectionHeader={({ section }) => (
						<View style={styles.sectionHeader}>
							<Text style={{ fontSize: 15, color: color.wrikeGreen2 }}>v{section.version}</Text>
							<Text style={{
								fontSize: 15, color: color.wrikeGreen2, marginLeft: 10, opacity: 0.2,
							}}
							>{section.date}
							</Text>
						</View>)
					}
					sections={this.state.releaseData}
					keyExtractor={this.keyExtractor}
				/>
			</View>
		);
	}
}


export { ReleaseNotesContainer };
export default connect(null, null)(ReleaseNotesContainer);
