import { __, sprintf } from '@wordpress/i18n';
import { Fragment, renderToString, useState } from '@wordpress/element';
import { Title } from '@bsf/force-ui';
import { useOnboardingState } from '@Onboarding/store';
import { renderField } from '../utils';
import StepNavButtons from '../components/nav-buttons';
import apiFetch from '@wordpress/api-fetch';
import { ONBOARDING_URL } from '@Global/constants/api';
import useFormValidation from '@Global/hooks/use-form-validation';

const inputFields = [
	{
		label: __( 'First Name', 'surerank' ),
		name: 'first_name',
		type: 'text',
		width: 'half',
		required: true,
	},
	{
		label: __( 'Last Name', 'surerank' ),
		name: 'last_name',
		type: 'text',
		width: 'half',
		required: false,
	},
	{
		label: __( 'Email Address', 'surerank' ),
		name: 'email',
		type: 'email',
		width: 'full',
		required: true,
	},
	{
		label: (
			<div
				dangerouslySetInnerHTML={ {
					__html: sprintf(
						// translators: %1$s is replaced with the privacy policy link.
						__(
							'Get notified about SEO issues on your website. Plus help improve SureRank by sharing how you use the plugin. %1$s',
							'surerank'
						),
						renderToString(
							<a
								className="no-underline focus:ring-0"
								href={ surerank_globals.privacy_policy_url }
								target="_blank"
								rel="noopener noreferrer"
							>
								{ __( 'View our Privacy Policy', 'surerank' ) }
							</a>
						)
					),
				} }
			/>
		),
		name: 'agree_to_terms',
		value: 'agree_to_terms',
		type: 'checkbox',
		required: true,
	},
];

const UserDetails = () => {
	const [
		{ userDetails = {}, websiteDetails = {}, socialProfilesURLs = {} },
		dispatch,
	] = useOnboardingState();
	// Local form state
	const [ formState, setFormState ] = useState( userDetails );
	const { errors, validate, clearFieldError } = useFormValidation(
		formState,
		inputFields
	);

	const handleSaveForm = () => {
		dispatch( { userDetails: formState } );
	};

	const handleChangeSelection = ( name ) => ( value ) => {
		clearFieldError( name );
		setFormState( {
			...formState,
			[ name ]: value,
		} );
		handleSaveForm();
	};

	const handleSubmit = ( event ) => {
		event.preventDefault();
	};

	const handleClickNext =
		( skip = false ) =>
		async ( setIsLoading ) => {
			setIsLoading( ( prevState ) => ( { ...prevState, next: true } ) );

			if ( ! skip && ! validate() ) {
				setIsLoading( ( prevState ) => ( {
					...prevState,
					next: false,
				} ) );
				throw new Error( `Form validation error!`, {
					cause: 'form-validation',
				} );
			}

			try {
				const about_page =
					websiteDetails?.about_page?.value ??
					websiteDetails?.about_page;
				const contact_page =
					websiteDetails?.contact_page?.value ??
					websiteDetails?.contact_page;

				const payload = {
					website_type: websiteDetails.website_type || '',
					website_name: websiteDetails.website_name || '',
					website_owner_name: websiteDetails.website_owner_name || '',
					organization_type:
						websiteDetails.organization_type || 'Organization',
					website_owner_phone:
						websiteDetails.website_owner_phone || '',
					website_logo: websiteDetails.website_logo?.url || '',
					about_page: about_page ? parseInt( about_page ) : 0,
					contact_page: contact_page ? parseInt( contact_page ) : 0,
					social_profiles: socialProfilesURLs || [],
					...( ! skip && {
						first_name: formState.first_name || '',
						last_name: formState.last_name || '',
						email: formState.email || '',
					} ),
				};

				await apiFetch( {
					path: ONBOARDING_URL,
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
					},
					body: JSON.stringify( payload ),
				} );
			} catch ( error ) {}
		};

	return (
		<form
			className="flex flex-col gap-6"
			onSubmit={ handleSubmit }
			noValidate
		>
			<div className="space-y-1">
				<Title
					tag="h4"
					title={ __( 'Okay, just one last step…', 'surerank' ) }
					size="md"
				/>
				<p>
					{ __(
						'Help us tailor your SureRank experience and keep you updated with SEO tips, feature improvements, and helpful recommendations.',
						'surerank'
					) }
				</p>
			</div>

			<div className="flex flex-wrap gap-6">
				{ inputFields.map( ( field, index ) => (
					<Fragment key={ field.name }>
						{ renderField(
							field,
							formState[ field.name ],
							handleChangeSelection( field.name ),
							errors[ field.name ],
							{
								initialFocus: index === 0,
							}
						) }
					</Fragment>
				) ) }
			</div>

			{ /* Nav Buttons */ }
			<StepNavButtons
				nextProps={ {
					onClick: handleClickNext( false ),
					children: __( 'Finish', 'surerank' ),
				} }
				backProps={ {
					onClick: handleSaveForm,
				} }
				skipProps={ {
					onClick: handleClickNext( true ),
				} }
			/>
		</form>
	);
};

export default UserDetails;
