import { __ } from '@wordpress/i18n';
import { useCallback } from '@wordpress/element';
import { Button } from '@wordpress/components';
import { cog } from '@wordpress/icons';

import Toggle from '../../shared/Toggle';

type FormRowProps = {
	form: FormDataRow;
	lianaAutomationEnabled: boolean;
	lianaAutomationSettingsUrl: string;
	lianaMailerEnabled: boolean;
	lianaMailerSettingsUrl: string;
	openConfiguration?: () => void;
	toggleAutomationForm: (
		params: { formPlugin: string; id: number },
		event: React.ChangeEvent< HTMLInputElement >
	) => void;
	toggleMailerForm: (
		params: { formPlugin: string; id: number },
		event: React.ChangeEvent< HTMLInputElement >
	) => void;
};

export default function FormRow( props: FormRowProps ) {
	const {
		form,
		lianaAutomationEnabled,
		lianaAutomationSettingsUrl,
		lianaMailerEnabled,
		lianaMailerSettingsUrl,
		openConfiguration,
		toggleAutomationForm,
		toggleMailerForm,
	} = props;

	/**
	 * Gets the Toggle component for a specific form and tool.
	 * @param param0            - The form and tool details.
	 * @param param0.configured - Whether the form is configured for the tool (only for lianaMailer).
	 * @param param0.connected  - Whether the form is connected to the tool.
	 * @param param0.formPlugin - The form plugin.
	 * @param param0.id         - The form ID.
	 * @param param0.tool       - The tool name (lianaMailer/lianaAutomation).
	 * @param param0.url        - The form URL (only for lianaMailer).
	 * @return                  - The Toggle component.
	 */
	const getToggle = useCallback(
		( {
			configured,
			connected,
			formPlugin,
			id,
			tool,
		}: {
			configured?: boolean;
			connected: boolean;
			formPlugin: string;
			id: number;
			tool: string;
		} ) => {
			if ( tool === 'lianaAutomation' && ! lianaAutomationEnabled ) {
				return (
					<Button
						className="gs-form-settings-button"
						href={ lianaAutomationSettingsUrl }
						icon={ cog }
						iconSize={ 18 }
						size="small"
						variant="secondary"
					>
						{ __( 'Configure Settings', 'liana-with-growthstack' ) }
					</Button>
				);
			}
			if ( tool === 'lianaMailer' && ! lianaMailerEnabled ) {
				return (
					<Button
						className="gs-form-settings-button"
						href={ lianaMailerSettingsUrl }
						icon={ cog }
						iconSize={ 18 }
						size="small"
						variant="secondary"
					>
						{ __( 'Configure Settings', 'liana-with-growthstack' ) }
					</Button>
				);
			}
			if (
				tool === 'lianaMailer' &&
				! configured &&
				formPlugin !== 'liana-automation'
			) {
				return (
					<Button
						className="gs-form-settings-button"
						icon={ cog }
						iconSize={ 18 }
						onClick={ openConfiguration }
						size="small"
						variant="secondary"
					>
						{ __( 'Configure form', 'liana-with-growthstack' ) }
					</Button>
				);
			}
			const cogBtn =
				tool === 'lianaMailer' && formPlugin !== 'liana-automation' ? (
					<Button
						className="gs-form-settings-button"
						icon={ cog }
						iconSize={ 18 }
						onClick={ openConfiguration }
						size="small"
						variant="link"
					/>
				) : null;
			const fullId = `${ tool }_${ id }`;
			const disabled =
				( tool === 'lianaMailer' && ! lianaMailerEnabled ) ||
				( tool === 'lianaAutomation' && ! lianaAutomationEnabled ) ||
				formPlugin === 'liana-automation';
			let checked = ! disabled && connected;

			if ( formPlugin === 'liana-automation' && tool === 'lianaMailer' ) {
				checked = false;
			}
			if (
				formPlugin === 'liana-automation' &&
				tool === 'lianaAutomation'
			) {
				checked = true;
			}

			const toggleFn =
				tool === 'lianaMailer'
					? toggleMailerForm
					: toggleAutomationForm;

			let tooltip = '';
			if (
				formPlugin === 'liana-automation' &&
				tool === 'lianaAutomation'
			) {
				tooltip = __(
					'LianaAutomation forms are always connected to LianaAutomation.',
					'liana-with-growthstack'
				);
			}
			if ( formPlugin === 'liana-automation' && tool === 'lianaMailer' ) {
				tooltip = __(
					"LianaAutomation forms can't be connected to LianaMailer.",
					'liana-with-growthstack'
				);
			}

			return (
				<>
					<Toggle
						disabled={ disabled }
						checked={ checked }
						id={ fullId }
						name={ fullId }
						onChange={ ( event ) =>
							toggleFn( { formPlugin, id }, event )
						}
						tooltip={ tooltip }
					/>
					{ cogBtn }
				</>
			);
		},
		[
			lianaAutomationEnabled,
			lianaMailerEnabled,
			lianaAutomationSettingsUrl,
			lianaMailerSettingsUrl,
			openConfiguration,
			toggleAutomationForm,
			toggleMailerForm,
		]
	);

	return (
		<tr key={ form.id }>
			<td>
				<a
					className="gs-forms__form-name"
					href={ form.url }
					target={
						form.plugin.slug === 'liana-automation' ? '_blank' : ''
					}
					rel="noreferrer"
				>
					{ form.name }
				</a>
			</td>
			<td>
				{ getToggle( {
					tool: 'lianaAutomation',
					id: form.id,
					formPlugin: form.plugin.slug,
					connected: form.lianaAutomationConnected,
				} ) }
			</td>
			<td>
				{ getToggle( {
					tool: 'lianaMailer',
					id: form.id,
					formPlugin: form.plugin.slug,
					configured: form.lianaMailerConfigured,
					connected: form.lianaMailerConnected,
					url: form.url,
				} ) }
			</td>
			<td>{ form.plugin.name }</td>
		</tr>
	);
}