import React from 'react';
import {dateI18n, __experimentalGetSettings} from '@wordpress/date';
import {getDataFontForTypography} from 'components/typography-select/utils';

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-cards__meta">
				{displayPostTaxonomy && '' !== categoryObject && (
					<div
						className="flo-block-post-cards__taxonomy"
						data-font={getDataFontForTypography(postTaxonomyTypography)}
					>
						{categoryObject.name}
					</div>
				)}

				{displayPostDate && post.date_gmt && (
					<div
						className="flo-block-post-cards__date"
						data-font={getDataFontForTypography(postDateTypography)}
					>
						{dateI18n(dateFormat, post.date_gmt)}
					</div>
				)}
			</div>
		);
	}
}

export default Meta;
