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

/**
 * External dependencies
 */
import { noop } from 'lodash';

/**
 * Internal dependencies
 */
import type { ConnectionMode, GA4Property } from './config';

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

export const Connection = ( {
	className = '',
	currentProperty,
	disabled,
	mode,
	selectedProperty,
	properties,
	onSelectProperty,
	onChangeAccount,
}: ConnectionProps ): JSX.Element | null => {
	switch ( mode ) {
		case 'init':
			return null;

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

		case 'property-selection':
			return (
				<div className={ className }>
					{ properties.length ? (
						<SelectControl
							className={ `${ className }__selector` }
							label={ _x(
								'Google Analytics Property',
								'text',
								'nelio-ab-testing'
							) }
							disabled={ disabled }
							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-ab-testing'
							) }
						</p>
					) }
					<Button
						className="nab-google-analytics-data-setting__reset-button"
						variant="link"
						onClick={ onChangeAccount }
						disabled={ disabled }
					>
						{ _x(
							'Change Google Account',
							'command',
							'nelio-ab-testing'
						) }
					</Button>
				</div>
			);

		case 'ga4-property-id':
			return (
				<div className="nab-google-analytics-data-setting__property">
					<TextControl
						label={ _x(
							'Google Analytics Property',
							'text',
							'nelio-ab-testing'
						) }
						value={ `${ currentProperty.name } (${ currentProperty.id })` }
						onChange={ noop }
						disabled={ disabled }
					/>
					<Button
						className="nab-google-analytics-data-setting__reset-button"
						variant="link"
						onClick={ onChangeAccount }
						disabled={ disabled }
					>
						{ _x(
							'Change Property',
							'command',
							'nelio-ab-testing'
						) }
					</Button>
				</div>
			);
	}
};