import React, { useState } from 'react';
import { ButtonBlock } from '../../types/blocks';
import SquareButton from './SquareButton';
import styles from './GridButtonsBlock.module.css';

interface GridButtonsBlockProps {
  block: ButtonBlock;
  onAction?: (actionType: string, actionValue: string, blockId?: string, buttonId?: string) => void;
  isInputVisible?: boolean;
}

const GridButtonsBlock: React.FC<GridButtonsBlockProps> = ({ block, onAction, isInputVisible }) => {
  const [expanded, setExpanded] = useState(false);
  const { buttons, style } = block;
  const { 
    gap = 12, 
    padding = 16, 
    buttonSize = 100,
    columns = 3 
  } = style;

  const visibleButtons = expanded ? buttons : buttons.slice(0, 6);
  const hasMoreButtons = buttons.length > 6;

  return (
    <div 
      className={styles.container}
      style={{ padding }}
    >
      <div className={styles.gridContainer}>
        <div 
          className={`${styles.grid} ${expanded ? styles.expanded : ''}`}
          style={{ 
            gap,
            gridTemplateColumns: `repeat(${columns}, 1fr)`
          }}
        >
          {visibleButtons.map((button, index) => (
          <div 
            key={button.id}
            className={styles.buttonWrapper}
            style={{ '--n': index + 1 } as React.CSSProperties}
          >
            <SquareButton 
              {...button}
              size={buttonSize}
              onClick={() => {
                if (button.action && onAction) {
                  onAction(button.action.type, button.action.value, block.id, button.id);
                }
              }}
            />
          </div>
          ))}
        </div>
        {hasMoreButtons && (
          <button 
            className={styles.showMoreButton}
            onClick={() => setExpanded(!expanded)}
          >
            {expanded ? 'Свернуть' : 'Показать больше'}
          </button>
        )}
      </div>
    </div>
  );
};

export default GridButtonsBlock;