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

/**
 * External dependencies
 */
import { noop } from 'lodash';
import { usePostTypes } from '@nelio-content/data';
import { Maybe } from '@nelio-content/types';

/**
 * Internal dependencies
 */
import { AnalyticsRefreshButton } from './analytics-refresh-button';
import type { ConnectionMode, GA4Property } from './config';

type ConnectionProps = {
	readonly className?: string;
	readonly name: string;
	readonly currentProperty: Maybe< GA4Property >;
	readonly mode: ConnectionMode;
	readonly selectedProperty: Maybe< GA4Property >;
	readonly properties: ReadonlyArray< GA4Property >;
	readonly onChangeAccount: () => void;
	readonly onSelectProperty: ( property: GA4Property ) => void;
};

export const Connection = ( {
	className = '',
	name,
	currentProperty,
	mode,
	selectedProperty,
	properties,
	onSelectProperty,
	onChangeAccount,
}: ConnectionProps ): JSX.Element | null => {
	const hasAnalytics = usePostTypes( 'analytics' ).length > 0;
	if ( ! hasAnalytics ) {
		return null;
	}

	switch ( mode ) {
		case 'init':
			return (
				<div className={ className }>
					<div className={ `${ className }__connection-actions` }>
						<Button
							variant="secondary"
							size="small"
							onClick={ onChangeAccount }
						>
							{ _x(
								'Connect Google Analytics',
								'command',
								'nelio-content'
							) }
						</Button>
					</div>
				</div>
			);

		case 'awaiting-authorization':
			return (
				<div className={ className }>
					<div className={ `${ className }__overlay` }>
						<div className={ `${ className }__overlay-content` }>
							{ _x(
								'Please authorize your Google account…',
								'user',
								'nelio-content'
							) }
						</div>
					</div>
				</div>
			);

		case 'property-retrieval':
			return (
				<div className={ className }>
					<div className={ `${ className }__overlay` }>
						<div className={ `${ className }__overlay-content` }>
							{ _x(
								'Fetching properties from Google Analytics…',
								'user',
								'nelio-content'
							) }
							<Spinner />
						</div>
					</div>
				</div>
			);

		case 'property-selection':
			return (
				<div className={ className }>
					{ properties.length ? (
						<SelectControl
							className={ `${ className }__selector` }
							label={ _x(
								'Google Analytics Property',
								'text',
								'nelio-content'
							) }
							value={ selectedProperty?.id }
							options={ properties.map( ( p ) => ( {
								label: `${ p.name } (${ p.id })`,
								value: p.id,
							} ) ) }
							onChange={ ( selectedValue ) =>
								onSelectProperty(
									properties.find(
										( p ) => p.id === selectedValue
									) as GA4Property
								)
							}
						/>
					) : (
						<p>
							{ _x(
								'Selected account doesn’t have any properties. Please select a different account.',
								'user',
								'nelio-content'
							) }
						</p>
					) }
					<div className={ `${ className }__connection-actions` }>
						<Button
							className="nelio-content-google-analytics-data-setting__reset-button"
							variant="secondary"
							size="small"
							onClick={ onChangeAccount }
						>
							{ _x(
								'Change Google Account',
								'command',
								'nelio-content'
							) }
						</Button>
					</div>
				</div>
			);

		case 'ga4-property-id':
			return (
				<div className={ className }>
					<TextControl
						label={ _x(
							'Google Analytics Property',
							'text',
							'nelio-content'
						) }
						value={
							currentProperty?.name
								? `${ currentProperty?.name } (${ currentProperty?.id })`
								: currentProperty?.id ?? ''
						}
						onChange={ noop }
						disabled={ true }
					/>
					<div
						className={ `${ className }__property-control-actions` }
					>
						<Button
							className={ `${ className }__reset-button` }
							variant="secondary"
							size="small"
							onClick={ onChangeAccount }
						>
							{ _x(
								'Change Property',
								'command',
								'nelio-content'
							) }
						</Button>
						<AnalyticsRefreshButton
							name={ name }
							className={ className }
						/>
					</div>
				</div>
			);
	}
};