import React from 'react';
import { useTranslation } from 'react-i18next';
import { Menu, ActionIcon } from '@mantine/core';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export interface OSOption {
  label: string;
  url: string;
  value: string;
}

interface DesktopInstallTitleProps {
  osLabel: string;
  osUrl: string;
  osOptions: OSOption[];
  onDownloadUrlChange?: (url: string) => void;
}

export const DesktopInstallTitle: React.FC<DesktopInstallTitleProps> = ({ 
  osLabel, 
  osUrl, 
  osOptions, 
  onDownloadUrlChange 
}) => {
  const { t } = useTranslation();
  const [selectedOsUrl, setSelectedOsUrl] = React.useState<string>(osUrl);

  React.useEffect(() => {
    setSelectedOsUrl(osUrl);
  }, [osUrl]);

  const handleOsSelect = React.useCallback((option: OSOption) => {
    setSelectedOsUrl(option.url);
    onDownloadUrlChange?.(option.url);
  }, [onDownloadUrlChange]);

  const currentOsOption = osOptions.find(opt => opt.url === selectedOsUrl) || 
    (osOptions.length > 0 ? osOptions[0] : { label: osLabel, url: osUrl });
  
  const displayLabel = currentOsOption.label || osLabel;
  const title = displayLabel 
    ? t('onboarding.desktopInstall.titleWithOs', 'Download for {{osLabel}}', { osLabel: displayLabel })
    : t('onboarding.desktopInstall.title', 'Download');

  // If only one option or no options, don't show dropdown
  if (osOptions.length <= 1) {
    return <div style={{ textAlign: 'center', width: '100%' }}>{title}</div>;
  }

  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem', width: '100%' }}>
      <span style={{ whiteSpace: 'nowrap' }}>{title}</span>
      <Menu position="bottom" offset={5} zIndex={10000}>
        <Menu.Target>
          <ActionIcon
            variant="transparent"
            size="sm"
            style={{ 
              background: 'transparent',
              border: 'none',
              color: 'inherit',
              padding: 0
            }}
          >
            <ExpandMoreIcon fontSize="small" />
          </ActionIcon>
        </Menu.Target>
        <Menu.Dropdown>
          {osOptions.map((option) => {
            const isSelected = option.url === selectedOsUrl;
            return (
              <Menu.Item
                key={option.url}
                onClick={() => handleOsSelect(option)}
                style={{
                  backgroundColor: isSelected
                    ? 'light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8))'
                    : 'transparent',
                  color: isSelected
                    ? 'light-dark(var(--mantine-color-blue-9), var(--mantine-color-white))'
                    : 'inherit',
                }}
              >
                {option.label}
              </Menu.Item>
            );
          })}
        </Menu.Dropdown>
      </Menu>
    </div>
  );
};

