/**
 * WordPress dependencies
 */
import { Button } from '@safe-wordpress/components';
import { useDispatch, useSelect } from '@safe-wordpress/data';
import { _x, sprintf } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import clsx from 'clsx';
import { trim } from 'lodash';
import { SortableList } from '@nab/components';
import { store as NAB_DATA } from '@nab/data';
import { store as NAB_EXPERIMENTS } from '@nab/experiments';
import { createGoal } from '@nab/utils';
import type { Goal } from '@nab/types';

/**
 * Internal dependencies
 */
import './style.scss';
import { useExperimentAttribute } from '../hooks';
import { store as NAB_EDITOR } from '../../store';

export const GoalList = (): JSX.Element => {
	const goals = useGoals();
	const isExperimentPaused = useIsExperimentPaused();
	const { addGoals, openReusableDialog, setActiveGoal, sortGoals } =
		useDispatch( NAB_EDITOR );
	const isImportEnabled = useIsImportEnabled();

	const isFirstGoalAutomatic = useIsFirstGoalAutomatic();

	return (
		<div className="nab-goal-list">
			<SortableList
				disabled={ isExperimentPaused }
				items={ goals }
				lockCount={ isFirstGoalAutomatic ? 1 : undefined }
				render={ GoalItem }
				onSort={ sortGoals }
			/>

			{ ! isExperimentPaused && (
				<div className="nab-goal-list__actions">
					<Button
						className="nab-goal-list__add-new-goal-button"
						variant="link"
						onClick={ () => {
							const goal = createGoal();
							void addGoals( goal );
							void setActiveGoal( goal.id );
						} }
						icon="plus"
					>
						{ _x( 'New', 'command (goal)', 'nelio-ab-testing' ) }
					</Button>
					{ isImportEnabled && (
						<Button
							className="nab-goal-list__import-goals-button"
							variant="link"
							onClick={ () =>
								openReusableDialog( 'manage-goals' )
							}
							icon="external"
						>
							{ _x( 'Import', 'command', 'nelio-ab-testing' ) }
						</Button>
					) }
				</div>
			) }
		</div>
	);
};

const GoalItem = ( {
	item: goal,
	index,
}: {
	readonly item: Omit< Goal, 'conversionActions' >;
	readonly index: number;
} ) => {
	const activeGoalId = useActiveGoalId();
	const { setActiveGoal } = useDispatch( NAB_EDITOR );
	return (
		<div
			key={ goal.id }
			className={ clsx( 'nab-goal-list__item', {
				'nab-goal-list__item--is-active': goal.id === activeGoalId,
			} ) }
		>
			<Button
				disabled={ goal.id === activeGoalId }
				title={
					trim( goal.attributes.name ) ||
					getDefaultGoalNameForIndex( index )
				}
				onClick={ () => setActiveGoal( goal.id ) }
			>
				{ trim( goal.attributes.name ) ||
					getDefaultGoalNameForIndex( index ) }
			</Button>
		</div>
	);
};

// =====
// HOOKS
// =====

const useActiveGoalId = () =>
	useSelect( ( select ) => select( NAB_EDITOR ).getActiveGoal()?.id, [] );

const useGoals = () =>
	useSelect( ( select ) => select( NAB_EDITOR ).getGoals(), [] );

const useIsExperimentPaused = () => {
	const [ status ] = useExperimentAttribute( 'status' );
	return ( status || '' ).includes( 'paused' );
};

const useIsImportEnabled = (): boolean =>
	useSelect(
		( select ) => !! select( NAB_DATA ).getReusableGoals().length,
		[]
	);

const useIsFirstGoalAutomatic = () =>
	useSelect( ( select ): boolean => {
		const { getExperimentType } = select( NAB_EDITOR );
		const { hasExperimentSupport } = select( NAB_EXPERIMENTS );
		return hasExperimentSupport(
			getExperimentType(),
			'automaticGoalSetup'
		);
	}, [] );

// =======
// HELPERS
// =======

function getDefaultGoalNameForIndex( index: number ) {
	return index
		? sprintf(
				/* translators: %d: Goal index. */
				_x( 'Goal %d', 'text', 'nelio-ab-testing' ),
				index + 1
		  )
		: _x( 'Default Goal', 'text', 'nelio-ab-testing' );
}