import { __ } from '@wordpress/i18n';
import { useState, Fragment, useMemo } from '@wordpress/element';
import {
	FacebookIcon,
	TwitterIcon,
	InstagramIcon,
	LinkedInIcon,
	YouTubeIcon,
	PinterestIcon,
	TikTokIcon,
	MediumIcon,
	TumblrIcon,
	ThreadsIcon,
	YelpIcon,
	WhatsAppIcon,
	TelegramIcon,
} from '../icons';
import { Button, DropdownMenu, Title } from '@bsf/force-ui';
import { PlusIcon, LinkIcon } from 'lucide-react';
import StepNavButtons from '../components/nav-buttons';
import { useOnboardingState } from '@Onboarding/store';
import { focusHelper } from '../utils';

const iconMap = {
	facebook: FacebookIcon,
	twitter: TwitterIcon,
	instagram: InstagramIcon,
	linkedin: LinkedInIcon,
	youtube: YouTubeIcon,
	pinterest: PinterestIcon,
	tiktok: TikTokIcon,
	medium: MediumIcon,
	tumblr: TumblrIcon,
	threads: ThreadsIcon,
	yelp: YelpIcon,
	whatsapp: WhatsAppIcon,
	telegram: TelegramIcon,
	link: LinkIcon,
};

const socialProfiles = surerank_admin_common?.social_profiles
	.filter( ( item ) => ! item.extra )
	.map( ( item ) => ( {
		...item,
		icon: iconMap[ item.id ] || iconMap.link,
	} ) );

const dropdownOptions = surerank_admin_common?.social_profiles
	.filter( ( item ) => item.extra )
	.map( ( item ) => ( {
		...item,
		icon: iconMap[ item.id ] || iconMap.link,
	} ) );

/**
 * Get the initial list of social profiles to render.
 *
 * @param {Object} formState - The form state.
 * @return {Array} The initial list of social profiles to render.
 */
const getInitialList = ( formState ) => {
	return [
		...socialProfiles,
		...dropdownOptions.filter( ( item ) => item.id in formState ),
	];
};

const SocialProfiles = () => {
	const [ { socialProfilesURLs = {} }, dispatch ] = useOnboardingState();
	// Local states
	const [ formState, setFormState ] = useState( socialProfilesURLs );
	const [ socialProfileLists, setSocialProfileLists ] = useState(
		getInitialList( formState )
	);

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

	const handleAddProfileToList = ( socialMediaItem ) => {
		setSocialProfileLists( ( prev ) => [ ...prev, socialMediaItem ] );
	};

	const filteredDropdownOptions = useMemo( () => {
		return dropdownOptions.filter(
			( item ) =>
				! socialProfileLists.some(
					( listItem ) => listItem.id === item.id
				)
		);
	}, [ socialProfileLists ] );

	const handleChange = ( id ) => ( event ) => {
		setFormState( ( prev ) => ( { ...prev, [ id ]: event.target.value } ) );
	};

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

	return (
		<form className="flex flex-col gap-6" onSubmit={ handleSubmit }>
			<div className="space-y-1">
				<Title
					tag="h4"
					title={ __( 'Social Profiles', 'surerank' ) }
					size="md"
				/>
				<p className="w-full">
					{ __(
						'Please enter your social media profiles. These links can appear in the knowledge panel of the search results for your website.',
						'surerank'
					) }
				</p>
			</div>
			{ /* Settings / options */ }
			<div className="flex flex-col border border-solid border-border-subtle rounded-lg p-1">
				{ socialProfileLists.map(
					( { label, id, placeholder, icon: Icon }, index ) => (
						<Fragment key={ id }>
							<div className="flex items-center gap-3 w-full p-2.5">
								<div className="flex items-center gap-3 w-2/4">
									<Icon className="size-5" />
									<span className="hidden md:inline-block text-field-label text-sm font-medium whitespace-nowrap">
										{ label }
									</span>
								</div>
								<input
									className="text-sm text-right text-text-primary placeholder:text-text-tertiary w-full border-none bg-transparent focus:outline-none focus:ring-0"
									placeholder={ placeholder }
									onChange={ handleChange( id ) }
									value={ formState[ id ] || '' }
									{ ...( index === 0 && {
										ref: focusHelper,
									} ) }
								/>
							</div>
							{ ( !! filteredDropdownOptions.length ||
								index < socialProfileLists.length - 1 ) && (
								<span className="w-full block px-2.5">
									<hr className="border-border-subtle border-b border-t-0 border-x-0 my-1 w-full" />
								</span>
							) }
						</Fragment>
					)
				) }
				{ !! filteredDropdownOptions.length && (
					<DropdownMenu>
						<DropdownMenu.Trigger>
							<Button
								type="button"
								variant="ghost"
								className="w-max my-2 mx-auto"
								size="xs"
								icon={ <PlusIcon className="size-4" /> }
								iconPosition="right"
							>
								{ __( 'Add another profile', 'surerank' ) }
							</Button>
						</DropdownMenu.Trigger>
						<DropdownMenu.Portal id="surerank-root">
							<DropdownMenu.ContentWrapper>
								<DropdownMenu.Content className="w-60">
									<DropdownMenu.List>
										{ filteredDropdownOptions.map(
											( {
												label,
												id,
												icon: Icon,
												placeholder,
											} ) => (
												<DropdownMenu.Item
													key={ id }
													onClick={ () =>
														handleAddProfileToList(
															{
																label,
																id,
																icon: Icon,
																placeholder,
															}
														)
													}
												>
													<div className="flex items-center gap-3 w-full">
														<Icon className="size-4" />
														<span className="text-field-label text-sm font-medium">
															{ label }
														</span>
													</div>
												</DropdownMenu.Item>
											)
										) }
									</DropdownMenu.List>
								</DropdownMenu.Content>
							</DropdownMenu.ContentWrapper>
						</DropdownMenu.Portal>
					</DropdownMenu>
				) }
			</div>
			<StepNavButtons
				className="my-0"
				nextProps={ {
					onClick: handleSaveForm,
				} }
				backProps={ {
					onClick: handleSaveForm,
				} }
			/>
		</form>
	);
};

export default SocialProfiles;
