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

/**
 * External dependencies
 */
import { usePluginSetting } from '@nab/data';

/**
 * Internal dependencies
 */
import type { Question } from './types';

export type QuestionListProps = {
	readonly questions: ReadonlyArray< Question >;
	readonly onChatBot: () => void;
	readonly onContactUs: () => void;
	readonly runWalkthrough?: () => void;
};

export const QuestionList = ( {
	questions,
	onChatBot,
	onContactUs,
	runWalkthrough,
}: QuestionListProps ): JSX.Element => {
	const hasChat = usePluginSetting( 'isChatbotAvailable' );
	const hasActions = !! hasChat || !! runWalkthrough;
	return (
		<div className="nab-contextual-help__content">
			<h2 className="nab-contextual-help__title">
				{ _x( 'Help', 'text', 'nelio-ab-testing' ) }
			</h2>
			<p>
				{ _x(
					'Here you have some resources that might help you:',
					'user',
					'nelio-ab-testing'
				) }
			</p>
			<ul className="nab-contextual-help__questions">
				{ questions.map( ( { link, label } ) => (
					<li key={ link }>
						<ExternalLink href={ link }>{ label }</ExternalLink>
					</li>
				) ) }
			</ul>
			{ hasActions && (
				<div className="nab-contextual-help__main-actions">
					{ hasChat && (
						<Button variant="primary" onClick={ onChatBot }>
							{ _x( 'Chat', 'command', 'nelio-ab-testing' ) }
						</Button>
					) }
					{ runWalkthrough && (
						<Button variant="secondary" onClick={ runWalkthrough }>
							{ _x(
								'Take a Tour',
								'command',
								'nelio-ab-testing'
							) }
						</Button>
					) }
				</div>
			) }
			<p>
				{ _x(
					'Not finding what you need?',
					'user',
					'nelio-ab-testing'
				) }{ ' ' }
				<Button variant="link" onClick={ onContactUs }>
					{ _x( 'Contact us', 'user', 'nelio-ab-testing' ) }
				</Button>
			</p>
		</div>
	);
};