/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import classnames from 'classnames';

import './style.scss';

import {getColorByValue} from 'components/color-picker/utils';
import {
	LoadGoogleFonts,
	getStyleForTypography,
} from 'components/typography-select/utils';
import {getEmByValue} from 'components/utils';
export function PostCategoriesView(props) {
	const {attributes, categoriesItems} = props;
	const {
		linksType,
		blockTitle,
		elementsColor,
		elementsColorHover,
		itemsGap,
		bordeColor,
		backgroundColor,
		allLinksLabel,
		hideHoverItem,
		indicatorColor,
		marginTop,
		marginBottom,
		mobileMarginTop,
		mobileMarginBottom,
		customItems = [],
		itemsTypography,
		titleTypography,
		categoriesAllItems,
	} = attributes;

	let csClassName = 'flo-category-switcher';
	let b = 'flo-category-switcher';

	const itemClassNames = classnames(`${b}__item`, {
		[`${b}__item hide`]: !hideHoverItem,
	});
	const catsView = () => (
		<>
			<LoadGoogleFonts typographies={[itemsTypography, titleTypography]} />
			<div
				className={classnames(b, 'flo-block')}
				style={{
					'--bg-color': getColorByValue(backgroundColor),
					'--margin-top': getEmByValue(marginTop),
					'--margin-bottom': getEmByValue(marginBottom),
					'--mobile-margin-top': getEmByValue(mobileMarginTop),
					'--mobile-margin-bottom': getEmByValue(mobileMarginBottom),
				}}
			>
				<div
					className={`${b}__wrap`}
					style={{
						'--border-color': getColorByValue(bordeColor),
						'--title-color': getColorByValue(elementsColor),
					}}
				>
					{blockTitle && (
						<div
							className={csClassName + '__title'}
							style={{
								...getStyleForTypography('block-title', titleTypography),
							}}
							data-font={
								titleTypography.type === 'theme' ? titleTypography.theme : ''
							}
						>
							{blockTitle}
						</div>
					)}

					<div
						className={`${b}__items`}
						style={{
							'--margin-left': getEmByValue(itemsGap),
							'--color-items': getColorByValue(elementsColor),
							'--color-items-hover': getColorByValue(elementsColorHover),
							'--color-indicator': getColorByValue(indicatorColor),
							...getStyleForTypography('block-items', itemsTypography),
						}}
					>
						{linksType === 'post-cat' && allLinksLabel !== '' && (
							<div
								className={itemClassNames}
								data-font={
									itemsTypography.type === 'theme' ? itemsTypography.theme : ''
								}
							>
								{allLinksLabel}
							</div>
						)}
						{linksType === 'custom-links' &&
							Array.isArray(customItems) &&
							customItems.map((item) => {
								return (
									<div
										className={itemClassNames}
										key={item.title}
										data-font={
											itemsTypography.type === 'theme'
												? itemsTypography.theme
												: ''
										}
									>
										{item.title}
									</div>
								);
							})}

						{linksType === 'post-cat' &&
							(categoriesItems &&
							Array.isArray(categoriesItems) &&
							categoriesItems.length
								? categoriesItems
								: categoriesAllItems
							).map((item) => {
								return (
									<div
										className={itemClassNames}
										data-font={
											itemsTypography.type === 'theme'
												? itemsTypography.theme
												: ''
										}
										key={item.value}
									>
										{item.label}
									</div>
								);
							})}
					</div>
				</div>
			</div>
		</>
	);

	return catsView();
}
