/**
 * External dependencies
 */
import apiFetch from '@wordpress/api-fetch';
import { __ } from '@wordpress/i18n';
import { useEffect, useState } from '@wordpress/element';
import { Card, CardBody, Flex, FlexItem, Button, Notice } from '@wordpress/components';

/**
 * Internal dependencies
 */
import { useWindowSize } from '../../shared/hooks';
import { getCourierLogo } from '../../shared/utils/getAsset';

interface WelcomeCardProps {
	startLogin: () => void;
	isLoading: boolean;
	isLinked: boolean;
	error: string | null;
}

export default function WelcomeCard(
	{ startLogin, isLoading, isLinked, error }: WelcomeCardProps
) {
	const { width } = useWindowSize();
	const isNarrow = width > 0 && width < 600;
	const logo = getCourierLogo('p2g');

	return (
		<Card size="large" style={{ marginBottom: 24 }}>
			<CardBody>
				<Flex
					direction={isNarrow ? 'column' : 'row'}
					align={isNarrow ? 'center' : 'center'}
					justify={isNarrow ? 'center' : 'flex-start'}
					gap={4}
				>
					<FlexItem>
						<img
							src={logo}
							alt="Parcel2Go"
							style={{
								height: 48,
								width: 'auto',
								display: 'block',
							}}
						/>
					</FlexItem>
					<FlexItem
						style={{
							flex: 1,
							minWidth: 0,
							textAlign: isNarrow ? 'center' : undefined,
						}}
					>
						<h2
							style={{
								margin: '0 0 8px 0',
								fontSize: '1.25rem',
								fontWeight: 600,
							}}
						>
							{__('Welcome to Parcel2Go', 'parcel2go-shipping')}
						</h2>
						<p
							style={{
								margin: 0,
								fontSize: '0.9375rem',
								color: '#646970',
								lineHeight: 1.5,
							}}
						>
							{__(
								'Shipping made easy, with access to trusted courier services, competitive rates & 24/7 shipping support - saving you time & money.',
								'parcel2go-shipping'
							)}
						</p>
					</FlexItem>
					<FlexItem>
						{isLoading ? (
							<Button
								variant="secondary"
								disabled
								isBusy
								style={{ whiteSpace: 'nowrap' }}
							>
								{__(
									'Checking connection…',
									'parcel2go-shipping'
								)}
							</Button>
						) : isLinked ? (
							<Flex
								direction="column"
								align={isNarrow ? 'center' : 'flex-end'}
								gap={2}
							>
								<Button
									variant="secondary"
									disabled
									style={{ whiteSpace: 'nowrap' }}
								>
									{__(
										'Connected to Parcel2Go ✓',
										'parcel2go-shipping'
									)}
								</Button>
							</Flex>
						) : (
							<Button
								variant="primary"
								onClick={startLogin}
								isBusy={isLoading}
								disabled={isLoading}
								style={{ whiteSpace: 'nowrap' }}
							>
								{isLoading
									? __('Connecting…', 'parcel2go-shipping')
									: __(
											'Login to Parcel2Go',
											'parcel2go-shipping'
										)}
							</Button>
						)}
					</FlexItem>
				</Flex>
				{error && (
					<div style={{ marginTop: 12 }}>
						<Notice status="error" isDismissible={false}>
							{error}
						</Notice>
					</div>
				)}
			</CardBody>
		</Card>
	);
}