import { __ } from '@wordpress/i18n';
import { SelectControl } from '@wordpress/components';
import Toggle from '../../shared/Toggle';

type AutomationTogglerFieldsProps = {
	channelOptions: Array< { label: string; value: string } >;
	cookieConsentPluginActive: boolean;
	onInputChange: ( name: string, value: string | boolean ) => void;
	step: number;
	values: {
		pbr: string | false;
		formsend: string | false;
		login: string | false;
		woocommerce: string | false;
		consent?: string | false;
	};
};

export default function AutomationTogglerFields(
	props: AutomationTogglerFieldsProps
) {
	const { channelOptions, cookieConsentPluginActive, onInputChange, step, values } = props;

	const togglerSelectCn =
		step === 3 ? 'gs-select-control hidden' : 'gs-select-control';
	const togglerSegmentCn =
		step === 0
			? 'gs-field-segment'
			: 'gs-field-segment gs-field-segment--nostyle';

	const handleTogglerChange = (
		key: string,
		event: React.ChangeEvent< HTMLInputElement >
	) => {
		const { checked } = event.target;
		if ( checked ) {
			return onInputChange( key, 'default' );
		}
		return onInputChange( key, false );
	};

	return (
		<>
			<p className="gs-settings-label">
				{ __(
					'Choose events you want to track',
					'liana-with-growthstack'
				) }
			</p>
			<div className={ togglerSegmentCn }>
				<Toggle
					checked={ !! values.pbr }
					id="channel_pbr"
					label={ __(
						'Page browsing events',
						'liana-with-growthstack'
					) }
					onChange={ ( value ) =>
						handleTogglerChange( 'channel_pbr', value )
					}
				/>
				{ values.pbr && (
					<SelectControl
						className={ togglerSelectCn }
						label={ __(
							'Channel for page browsing events',
							'liana-with-growthstack'
						) }
						name="channel_pbr"
						onChange={ ( value ) =>
							onInputChange( 'channel_pbr', value )
						}
						options={ channelOptions }
						value={ values.pbr }
						variant="minimal"
					/>
				) }
			</div>
			<div className={ togglerSegmentCn }>
				<Toggle
					checked={ !! values.formsend }
					id="channel_formsend"
					label={ __( 'Form events', 'liana-with-growthstack' ) }
					onChange={ ( value ) =>
						handleTogglerChange( 'channel_formsend', value )
					}
				/>
				{ values.formsend && (
					<SelectControl
						className={ togglerSelectCn }
						label={ __(
							'Channel for form events',
							'liana-with-growthstack'
						) }
						name="channel_formsend"
						onChange={ ( value ) =>
							onInputChange( 'channel_formsend', value )
						}
						options={ channelOptions }
						value={ values.formsend }
						variant="minimal"
					/>
				) }
			</div>
			<div className={ togglerSegmentCn }>
				<Toggle
					checked={ !! values.login }
					id="channel_login"
					label={ __( 'Login events', 'liana-with-growthstack' ) }
					onChange={ ( value ) =>
						handleTogglerChange( 'channel_login', value )
					}
				/>
				{ values.login && (
					<SelectControl
						className={ togglerSelectCn }
						label={ __(
							'Channel for login events',
							'liana-with-growthstack'
						) }
						name="channel_login"
						onChange={ ( value ) =>
							onInputChange( 'channel_login', value )
						}
						options={ channelOptions }
						value={ values.login }
						variant="minimal"
						hidden={ true }
					/>
				) }
			</div>
			<div className={ togglerSegmentCn }>
				<Toggle
					checked={ !! values.woocommerce }
					id="channel_woocommerce"
					label={ __(
						'WooCommerce events',
						'liana-with-growthstack'
					) }
					onChange={ ( value ) =>
						handleTogglerChange( 'channel_woocommerce', value )
					}
				/>
				{ values.woocommerce && (
					<SelectControl
						className={ togglerSelectCn }
						label={ __(
							'Channel for WooCommerce events',
							'liana-with-growthstack'
						) }
						name="channel_woocommerce"
						onChange={ ( value ) =>
							onInputChange( 'channel_woocommerce', value )
						}
						options={ channelOptions }
						value={ values.woocommerce }
						variant="minimal"
					/>
				) }
			</div>
			<p className="gs-settings-label">
				{ __(
					'Cookie consent',
					'liana-with-growthstack'
				) }
			</p>
			<div className={ togglerSegmentCn }>
				<SelectControl
					className="gs-select-control"
					label={ __(
						'Consent management provider',
						'liana-with-growthstack'
					) }
					name="channel_consent"
					value={ values.consent || '' }
					onChange={ ( value ) =>
						onInputChange( 'channel_consent', value || false )
					}
					disabled={ cookieConsentPluginActive }
					options={ [
						{ value: '', label: __( 'None', 'liana-with-growthstack' ) },
						{ value: 'cookiebot', label: __( 'Cookiebot', 'liana-with-growthstack' ) },
						{ value: 'cookiehub', label: __( 'CookieHub', 'liana-with-growthstack' ) },
					] }
					variant="minimal"
				/>
				<p className="gs-settings-description components-base-control__help">
					{ __(
						'When a provider is selected, the tracking script is loaded only after the user consents to the Marketing cookie category.',
						'liana-with-growthstack'
					) }
				</p>
			</div>
		</>
	);
}