import { H3, Text } from '@automattic/jetpack-components';
import { createInterpolateElement } from '@wordpress/element';
import { sprintf, __, _n } from '@wordpress/i18n';
import { useMemo, useState } from 'react';
import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
import usePlan from '../../hooks/use-plan';
import useProtectData from '../../hooks/use-protect-data';
import OnboardingPopover from '../onboarding-popover';
import ScanButton from '../scan-button';
import styles from './styles.module.scss';

const ProtectCheck = () => (
	<svg width="80" height="96" viewBox="0 0 80 96" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			fillRule="evenodd"
			clipRule="evenodd"
			d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
			fill="#069E08"
		/>
		<path
			fillRule="evenodd"
			clipRule="evenodd"
			d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
			fill="white"
		/>
	</svg>
);

/**
 * Time Since
 *
 * @param {string} date - The past date to compare to the current date.
 * @return {string} - A description of the amount of time between a date and now, i.e. "5 minutes ago".
 */
const timeSince = date => {
	const now = new Date();
	const offset = now.getTimezoneOffset() * 60000;

	const seconds = Math.floor( ( new Date( now.getTime() + offset ).getTime() - date ) / 1000 );

	let interval = seconds / 31536000; // 364 days
	if ( interval > 1 ) {
		return sprintf(
			// translators: %s: number of years (e.g. "5 years ago")
			_n( '%s year ago', '%s years ago', Math.floor( interval ), 'jetpack-protect' ),
			Math.floor( interval )
		);
	}

	interval = seconds / 2592000; // 30 days
	if ( interval > 1 ) {
		return sprintf(
			// translators: %s: number of months (e.g. "5 months ago")
			_n( '%s month ago', '%s months ago', Math.floor( interval ), 'jetpack-protect' ),
			Math.floor( interval )
		);
	}

	interval = seconds / 86400; // 1 day
	if ( interval > 1 ) {
		return sprintf(
			// translators: %s: number of days (e.g. "5 days ago")
			_n( '%s day ago', '%s days ago', Math.floor( interval ), 'jetpack-protect' ),
			Math.floor( interval )
		);
	}

	interval = seconds / 3600; // 1 hour
	if ( interval > 1 ) {
		return sprintf(
			// translators: %s: number of hours (e.g. "5 hours ago")
			_n( '%s hour ago', '%s hours ago', Math.floor( interval ), 'jetpack-protect' ),
			Math.floor( interval )
		);
	}

	interval = seconds / 60; // 1 minute
	if ( interval > 1 ) {
		return sprintf(
			// translators: %s: number of minutes (e.g. "5 minutes ago")
			_n( '%s minute ago', '%s minutes ago', Math.floor( interval ), 'jetpack-protect' ),
			Math.floor( interval )
		);
	}

	return __( 'a few seconds ago', 'jetpack-protect' );
};

const EmptyList = () => {
	const { lastChecked } = useProtectData();
	const { hasPlan } = usePlan();
	const { data: status } = useScanStatusQuery();

	const [ dailyAndManualScansPopoverAnchor, setDailyAndManualScansPopoverAnchor ] =
		useState( null );

	const timeSinceLastScan = useMemo( () => {
		return lastChecked ? timeSince( Date.parse( lastChecked ) ) : null;
	}, [ lastChecked ] );

	return (
		<div className={ styles.empty }>
			<ProtectCheck />
			<H3 weight="bold" mt={ 8 }>
				{ __( "Don't worry about a thing", 'jetpack-protect' ) }
			</H3>
			<Text mb={ 4 }>
				{ timeSinceLastScan
					? createInterpolateElement(
							sprintf(
								// translators: %s: amount of time since the last scan (e.g. "5 minutes ago")
								__(
									'The last Protect scan ran <strong>%s</strong> and everything looked great.',
									'jetpack-protect'
								),
								timeSinceLastScan
							),
							{
								strong: <strong />,
							}
					  )
					: __( 'No threats have been detected by the current scan.', 'jetpack-protect' ) }
			</Text>
			{ hasPlan && (
				<>
					<ScanButton ref={ setDailyAndManualScansPopoverAnchor } />
					{ ! isScanInProgress( status ) && (
						<OnboardingPopover
							id="paid-daily-and-manual-scans"
							position={ 'bottom middle' }
							anchor={ dailyAndManualScansPopoverAnchor }
						/>
					) }
				</>
			) }
		</div>
	);
};

export default EmptyList;
