import { FC } from 'react'
import { Block, BlockType } from '../../types/blocks'
import TextBlock from '../blocks/TextBlock'
import ButtonBlock from '../blocks/ButtonBlock'
import ImageBlock from '../blocks/ImageBlock'
import SpacerBlock from '../blocks/SpacerBlock'

interface BlockRendererProps {
    block: Block
    isSelected?: boolean
    onUpdate: (updates: Partial<Block>) => void
    onSelect: () => void
    isEditing?: boolean
}

const BlockRenderer: FC<BlockRendererProps> = ({
    block,
    isSelected,
    onUpdate,
    onSelect,
    isEditing
}) => {

    switch (block.type) {
        case BlockType.TEXT:
            return (
                <TextBlock
                    block={block}
                    isSelected={isSelected}
                    onUpdate={onUpdate}
                    onSelect={onSelect}
                    isEditing={isEditing}
                />
            )

        case BlockType.BUTTON:
            return (
                <ButtonBlock
                    block={block}
                    isSelected={isSelected}
                    onUpdate={onUpdate}
                    onSelect={onSelect}
                    isEditing={isEditing}
                />
            )

        case BlockType.IMAGE:
            return (
                <ImageBlock
                    block={block}
                    isSelected={isSelected}
                    onUpdate={onUpdate}
                    onSelect={onSelect}
                    isEditing={isEditing}
                />
            )

        case BlockType.SPACER:
            return (
                <SpacerBlock
                    block={block}
                    isSelected={isSelected}
                    onUpdate={onUpdate}
                    onSelect={onSelect}
                    isEditing={isEditing}
                />
            )

        case BlockType.CONTAINER:
            // TODO: Implement ContainerBlock
            return (
                <div
                    style={{
                        border: isSelected ? '2px dashed #0038FF' : '1px dashed #e5e7eb',
                        borderRadius: '8px',
                        padding: '16px',
                        margin: '8px 0',
                        backgroundColor: '#f8f9fa',
                        minHeight: '80px',
                        position: 'relative',
                        cursor: 'pointer'
                    }}
                    onClick={onSelect}
                >
                    <div style={{ textAlign: 'center', color: '#6b7280', fontSize: '14px' }}>
                        Container Block (در حال توسعه)
                    </div>

                    {isSelected && (
                        <div
                            style={{
                                position: 'absolute',
                                top: '-8px',
                                right: '8px',
                                backgroundColor: '#0038FF',
                                color: 'white',
                                padding: '2px 6px',
                                fontSize: '10px',
                                borderRadius: '4px',
                                fontWeight: 'bold',
                                zIndex: 10
                            }}
                        >
                            کانتینر
                        </div>
                    )}
                </div>
            )
    }
}

export default BlockRenderer 