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

/**
 * External dependencies
 */
import { LoadingAnimation } from '@nelio-content/components';
import { store as NC_DATA } from '@nelio-content/data';
import { SocialProfilesManager } from '@nelio-content/social-profiles-manager';

/**
 * Internal dependencies
 */
import './style.scss';

type ProfileConnectionStepProps = {
	readonly isDisabled: boolean;
	readonly previousStep: () => void;
	readonly nextStep: () => void;
};

export const ProfileConnectionStep = ( {
	isDisabled,
	previousStep,
	nextStep,
}: ProfileConnectionStepProps ): JSX.Element => {
	const isLoading = useSelect(
		( select ) =>
			! select( NC_DATA ).hasFinishedResolution( 'getSocialProfiles' ),
		[]
	);
	const socialProfilesCount = useSelect(
		( select ) => select( NC_DATA ).getSocialProfileCount(),
		[]
	);

	return (
		<div className="nelio-content-wizard-page__step nelio-content-wizard-page__step--profile-connection">
			<div className="nelio-content-wizard-page__step-title">
				{ _x(
					'Connect Your Social Profiles',
					'user',
					'nelio-content'
				) }
			</div>
			<p className="nelio-content-wizard-page__step-description">
				{ _x(
					'To schedule and share content, please connect your social media profiles now.',
					'user',
					'nelio-content'
				) }
			</p>
			{ isLoading ? <LoadingAnimation /> : <SocialProfilesManager /> }
			<div className="nelio-content-wizard-page__step-actions">
				<Button
					className="nelio-content-wizard-page__step-button"
					variant="secondary"
					disabled={ isDisabled }
					onClick={ previousStep }
				>
					{ _x( 'Back', 'command', 'nelio-content' ) }
				</Button>
				<Button
					className="nelio-content-wizard-page__step-button"
					disabled={ socialProfilesCount === 0 || isDisabled }
					variant="primary"
					onClick={ nextStep }
				>
					{ _x( 'Continue', 'command', 'nelio-content' ) }
				</Button>
			</div>
		</div>
	);
};