/**
 * WordPress dependencies
 */
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import { castArray, compact, isArray } from 'lodash';
import {
	SocialMessageTextPreview,
	SocialProfileIcon,
} from '@nelio-content/components';
import { dateI18n } from '@nelio-content/date';
import type { Maybe, Url } from '@nelio-content/types';

/**
 * Internal dependencies
 */
import './style.scss';
import { MaybeSharedLink } from './maybe-shared-link';
import type { PreviewAttributes } from '../../../hooks';

export const ThreadsPreview = ( attrs: PreviewAttributes ): JSX.Element => {
	const {
		activeProfile: { id: profileId, displayName, username },
		dateValue,
		schedule,
		textComputed,
		timeValue,
		type,
	} = attrs;

	return (
		<div className="nelio-content-social-message-threads-preview">
			<div className="nelio-content-social-message-threads-preview__profile">
				<SocialProfileIcon
					profileId={ profileId }
					isNetworkHidden={ true }
				/>

				<div className="nelio-content-social-message-threads-preview__name-info">
					<div className="nelio-content-social-message-threads-preview__display-name">
						{ displayName }
					</div>
					<div className="nelio-content-social-message-threads-preview__username">
						@{ username }
					</div>
				</div>
			</div>

			<SocialMessageTextPreview
				value={ textComputed }
				linkBeautifier={ ( link ) => {
					const result = link.replace(
						/^(https?:\/\/[^\/]+.{0,15}).*/,
						'$1'
					);
					if ( result === link ) {
						return result.replace( /^https?:\/\//, '' );
					}
					return result.replace( /^https?:\/\//, '' ) + '…';
				} }
			/>

			{ [ 'image', 'video', 'multi-media' ].includes( type ) ? (
				<MediaPreview { ...attrs } />
			) : (
				<MaybeSharedLink />
			) }

			<div className="nelio-content-social-message-threads-preview__date">
				{ !! dateValue &&
					!! timeValue &&
					dateI18n(
						_x(
							'g:i A · d M Y',
							'text (Threads preview date)',
							'nelio-content'
						),
						schedule
					) }
				{ !! dateValue &&
					! timeValue &&
					dateI18n(
						_x(
							'd M Y',
							'text (Threads preview date)',
							'nelio-content'
						),
						schedule
					) }
				{ ! dateValue && _x( 'Someday', 'text', 'nelio-content' ) }
			</div>
		</div>
	);
};

const MediaPreview = ( attrs: PreviewAttributes ): JSX.Element => {
	const { image, video } = attrs;

	const media = compact( [
		...castArray( image ?? [] ),
		...castArray( video ?? [] ),
	] );

	const isImage = ( u: Maybe< Url > ): boolean =>
		image === u || ( isArray( image ) && image.includes( u ) );

	const isVideo = ( u: Maybe< Url > ): boolean =>
		video === u || ( isArray( video ) && video.includes( u ) );

	if ( media.length === 1 && isImage( media[ 0 ] ) ) {
		return (
			<img
				className="nelio-content-social-message-threads-preview__image"
				alt={ _x(
					'Image that will be shared with this message.',
					'text',
					'nelio-content'
				) }
				src={ media[ 0 ] }
			/>
		);
	}

	if ( media.length === 1 && isVideo( media[ 0 ] ) ) {
		return (
			<video
				className="nelio-content-social-message-threads-preview__image"
				src={ media[ 0 ] }
				autoPlay
				loop
				muted
			/>
		);
	}

	return (
		<div className="nelio-content-social-message-threads-preview__media-carousel">
			{ media.map( ( mediaItem, i ) => (
				<div
					className="nelio-content-social-message-threads-preview__media-item"
					key={ i }
				>
					{ isImage( mediaItem ) ? (
						<img
							className="nelio-content-social-message-threads-preview__media-item-image"
							alt={ _x(
								'Image that will be shared with this message.',
								'text',
								'nelio-content'
							) }
							src={ mediaItem }
						/>
					) : (
						<video
							className="nelio-content-social-message-threads-preview__media-item-video"
							src={ mediaItem }
							autoPlay
							loop
							muted
						/>
					) }
				</div>
			) ) }
		</div>
	);
};