import * as Select from '@radix-ui/react-select';
import Icon from '@/utils/Icon';
import ProPopover from '../Common/ProPopover';
import { memo, useCallback, useMemo } from 'react';
import useLicenseData from '@/hooks/useLicenseData';

const DataTableSelect = ({ value, onChange, options }) => {
	const handleValueChange = useCallback(
		( newValue ) => {
			onChange( newValue );
		},
		[ onChange ]
	);

	const { isLicenseValid, isPro } = useLicenseData();
	const isProActive = isPro && isLicenseValid;

	// Memoize expensive calculations
	const { hasProOptions, firstOption } = useMemo( () => {
		const hasProOpts = options.some( ( option ) => option.pro );
		return {
			hasProOptions: hasProOpts,
			firstOption: options[0]
		};
	}, [ options ]);

	if ( hasProOptions && ! isProActive && firstOption?.upsellPopover ) {
		return (
			<ProPopover
				title={firstOption.upsellPopover.title}
				subtitle={firstOption.upsellPopover.subtitle}
				bulletPoints={firstOption.upsellPopover.bulletPoints}
				primaryButtonUrl={firstOption.upsellPopover.primaryButtonUrl}
				secondaryButtonUrl={
					firstOption.upsellPopover.secondaryButtonUrl
				}
			>
				<h3 className="flex items-center gap-s burst-h4">
					{firstOption.label}
				</h3>
				<Icon name="chevron-down" />
			</ProPopover>
		);
	}
	if ( 1 === options.length ) {
		return (
			<span className="text-lg font-semibold">{options[0].label}</span>
		);
	}
	return (
		<Select.Root value={value} onValueChange={handleValueChange}>
			<Select.Trigger className="inline-flex items-center justify-between cursor-pointer py-2 px-0 all-[unset]">
				<Select.Value placeholder="Select an option…" />
				<Select.Icon className="ml-2">
					<Icon name="chevron-down" />
				</Select.Icon>
			</Select.Trigger>
			<Select.Content
				className="bg-gray-100
          z-[99]
          border border-gray-400
          rounded
          flex flex-col flex-wrap
          gap-4
          left-0 right-0
          shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]
          [animation-duration:600ms]
          [animation-timing-function:cubic-bezier(0.16,1,0.3,1)]
          [will-change:transform,opacity]
          data-[state=open]:animate-slideDownAndFade"
				position={'popper'}
				alignOffset={-10}
			>
				<Select.Viewport>
					{options.map( ( option ) => (
						<Select.Item
							key={option.key}
							value={option.key}
							className="min-w-[min(100vw,150px)]
                cursor-pointer
                text-black
                text-md
                px-3 py-2.5
                rounded
                flex items-center
                data-[disabled]:text-gray
                data-[disabled]:bg-gray-100
                data-[disabled]:cursor-not-allowed
                data-[highlighted]:text-black
                data-[highlighted]:outline-none
                data-[highlighted]:bg-brand-lightest
                data-[state=selected]:text-gray
                data-[state=selected]:outline-none"
							disabled={option.pro && ! isPro}
						>
							<Select.ItemText>{option.label}</Select.ItemText>
						</Select.Item>
					) )}
				</Select.Viewport>
			</Select.Content>
		</Select.Root>
	);
};

// Export memoized component to prevent unnecessary re-renders
export default memo( DataTableSelect );
