import { Select } from '@bsf/force-ui';
import { __ } from '@wordpress/i18n';
import { useMemo } from '@wordpress/element';
import { InfoTooltip } from '@AdminComponents/tooltip';

const SiteSelector = ( {
	sites = [],
	currentSiteUrl,
	selectedSite,
	onSiteSelect,
	placeholder = __( 'Select a site', 'surerank' ),
} ) => {
	// Create options with JSX components
	const options = useMemo( () => {
		const siteOptions = [];

		// Add verified sites first
		sites.forEach( ( site ) => {
			const tooltipText = site.isVerified
				? ''
				: __( 'Not Verified', 'surerank' );

			siteOptions.push( {
				label: site.siteUrl,
				value: site.siteUrl,
				tooltipText,
				isVerified: site.isVerified,
			} );
		} );

		// Add current site if not in the list
		const currentSiteInList = sites.some(
			( site ) =>
				site.siteUrl === currentSiteUrl ||
				site.siteUrl === `${ currentSiteUrl }/` ||
				site.siteUrl.replace( /\/$/, '' ) ===
					currentSiteUrl.replace( /\/$/, '' )
		);

		if ( ! currentSiteInList && currentSiteUrl ) {
			siteOptions.push( {
				label: currentSiteUrl,
				value: currentSiteUrl,
				tooltipText: __( 'Not Connected', 'surerank' ),
				isVerified: false,
				isCurrentSite: true,
			} );
		}

		return siteOptions;
	}, [ sites, currentSiteUrl ] );

	return (
		<Select
			value={ selectedSite }
			onChange={ onSiteSelect }
			size="md"
			combobox
			className="w-full"
		>
			<Select.Button
				placeholder={ placeholder }
				render={ ( selectedValue ) => selectedValue || placeholder }
			/>
			<Select.Options>
				{ options.map( ( option ) => (
					<Select.Option
						key={ option.value }
						value={ option.value }
						title={ option.tooltipText }
					>
						{ /* Enhanced JSX */ }
						<div className="flex items-center justify-between w-full">
							<span className="truncate">{ option.label }</span>
							{ ! option.isVerified && (
								<div className="flex items-center gap-1 mr-1">
									<InfoTooltip
										content={
											option.tooltipText ||
											( option.isCurrentSite
												? __(
														'Not Connected',
														'surerank'
												  )
												: __(
														'Not Verified',
														'surerank'
												  ) )
										}
										className="z-[9999]"
									/>
								</div>
							) }
						</div>
					</Select.Option>
				) ) }
			</Select.Options>
		</Select>
	);
};

export default SiteSelector;
