`use strict`
import { Component } from 'inferno'
import { connect } from 'inferno-redux'

import { fetchBlogList, fetchBlogEntry } from './actions'

import './blog_entry.scss'


class BlogEntryComponent extends Component
{
	constructor(props) {
		super(props)
		this.entry_date = this.props.match.params.entry_date
		this.entry_name = this.props.match.params.entry_name
	}

	componentDidMount()
	{
		if(this.props.blog_list.length === 0)
		{
			this.props.fetchBlogList()
		}
		if(this.props.blog_entry_name !== this.entry_name)
		{
			this.props.fetchBlogEntry(this.entry_date, this.entry_name)
		}
	}

	render()
	{
		return [
			<div className="blog-entry"
				dangerouslySetInnerHTML={this.props.blog_entry_name === this.entry_name ?
					{__html: this.props.blog_entry} : null}>
			</div>,
			<div id="image-container" onclick={() => close_image()}>
				<img id="image-view"/>
			</div>,
			<script>
				{`
				function open_image(src)
				{
					document.getElementById("image-view").src = src
					document.getElementById("image-container").style.display = 'flex'
				}

				function close_image()
				{
					document.getElementById("image-container").style.display = 'none'
				}`}
			</script>
		]
	}
}


const mapStateToProps = state => ({
	strings: state.lang.strings,
	blog_list: state.blog.list,
	blog_entry: state.blog.entry,
	blog_entry_name: state.blog.entry_name
})

const mapDispatchToProps = dispatch => ({
	fetchBlogList: () => dispatch(fetchBlogList()),
	fetchBlogEntry: (entry_date, entry_name) => dispatch(fetchBlogEntry(entry_date, entry_name))
})

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(BlogEntryComponent)