import React from 'react';
import {dateI18n, __experimentalGetSettings} from '@wordpress/date';

class Meta extends React.Component {
	render() {
		const {post, attributes, categoriesList} = this.props;

		const {
			postType,
			taxonomyType,
			displayPostTaxonomy,
			displayPostDate,
			postDateTypography,
			postTaxonomyTypography,
		} = attributes;

		const dateFormat = __experimentalGetSettings().formats.date;

		let categoryObject = '';
		let postTerms = '';
		//
		if (taxonomyType) {
			if ('post' === postType && 'category' === taxonomyType) {
				postTerms = post.categories;
			} else if ('post' === postType && 'post_tag' === taxonomyType) {
				postTerms = post.tags;
			} else if (post[taxonomyType]) {
				postTerms = post[taxonomyType];
			}

			if (postTerms) {
				categoriesList.map((item) => {
					if (item.id === postTerms[0]) {
						categoryObject = item;
					}
				});
			}
		}

		return (
			<div className="flo-block-post-list__meta">
				{displayPostTaxonomy && '' !== categoryObject && (
					<span
						className="flo-block-post-list__taxonomy"
						data-font={
							postTaxonomyTypography.type === 'theme'
								? postTaxonomyTypography.theme
								: ''
						}
					>
						{categoryObject.name}
					</span>
				)}

				{displayPostDate && post.date_gmt && (
					<span
						className="flo-block-post-list__date"
						data-font={
							postDateTypography.type === 'theme'
								? postDateTypography.theme
								: ''
						}
					>
						{dateI18n(dateFormat, post.date_gmt)}
					</span>
				)}
			</div>
		);
	}
}

export default Meta;
