import React from 'react';
import BlockRenderer from '../blocks/BlockRenderer';
import { homeScreenConfig } from '../../config/homeScreen';
import customAnalyticsService from '../../services/customAnalyticsService';
import { getCurrentUserId } from '../../constants/user';

interface StyleSelectorProps {
  selectedStyleButtonId?: string;
  onStyleSelect: (style: string, buttonId?: string) => void;
}

/**
 * Компонент для выбора стиля генерации
 */
const StyleSelector: React.FC<StyleSelectorProps> = ({
  selectedStyleButtonId,
  onStyleSelect
}) => {
  // Находим заголовок и блок выбора стиля в конфигурации
  const titleBlock = homeScreenConfig.homeScreen.blocks.find(block => block.id === 'step2');
  const styleBlock = homeScreenConfig.homeScreen.blocks.find(block => block.id === 'styleActions');
  
  if (!titleBlock || !styleBlock) {
    return null;
  }
  
  // Обработчик выбора стиля
  const handleAction = (actionType: string, actionValue: string, blockId?: string, buttonId?: string) => {
    if (actionType === 'selectStyle') {
      // Отслеживаем событие выбора стиля
      const eventName = actionValue === 'chibi' ? 'chibi_style_click' : 'emoji_style_click';
      customAnalyticsService.trackEvent({
        telegram_id: getCurrentUserId(),
        event_category: 'style',
        event_name: eventName
      });
      
      onStyleSelect(actionValue, buttonId);
    }
  };
  
  return (
    <>
      <BlockRenderer
        block={titleBlock}
        onAction={() => {}}
      />
      <BlockRenderer
        block={styleBlock}
        onAction={handleAction}
        selectedButtonId={selectedStyleButtonId}
      />
    </>
  );
};

export default StyleSelector;