import { FC, useState } from 'react'
import { SpacerBlock as SpacerBlockType } from '../../types/blocks'
import Input from '@/components/Input'

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

const SpacerBlock: FC<SpacerBlockProps> = ({
    block,
    isSelected,
    onUpdate,
    onSelect,
    isEditing = false
}) => {
    const [localHeight, setLocalHeight] = useState(block.style.height.toString())

    const handleHeightChange = (heightStr: string) => {
        const height = parseInt(heightStr) || 24
        setLocalHeight(heightStr)
        onUpdate({
            style: {
                ...block.style,
                height
            }
        })
    }

    const spacerStyle = {
        height: `${block.style.height}px`,
        backgroundColor: isSelected ? '#f0f8ff' : 'transparent',
        border: isSelected ? '2px dashed #0038FF' : '1px dashed #e5e7eb',
        borderRadius: '4px',
        margin: block.style.margin ?
            `${block.style.margin.top}px ${block.style.margin.right}px ${block.style.margin.bottom}px ${block.style.margin.left}px` :
            '0',
        position: 'relative' as const,
        cursor: 'pointer',
        minHeight: '12px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%'
    }

    return (
        <div
            style={spacerStyle}
            onClick={onSelect}
            className="spacer-block-wrapper"
        >
            {isEditing ? (
                <div className="w-full p-2 bg-gray-50 rounded">
                    <Input
                        label="ارتفاع فاصله (پیکسل)"
                        type="number"
                        value={localHeight}
                        onChange={(e) => handleHeightChange(e.target.value)}
                        placeholder="24"
                        min="1"
                        max="200"
                    />
                </div>
            ) : (
                <>
                    {/* Visual indicator when not selected */}
                    {!isSelected && (
                        <div
                            style={{
                                fontSize: '10px',
                                color: '#9ca3af',
                                fontWeight: 'normal',
                                backgroundColor: 'rgba(255,255,255,0.8)',
                                padding: '2px 6px',
                                borderRadius: '2px'
                            }}
                        >
                            فاصله {block.style.height}px
                        </div>
                    )}
                </>
            )}

            {/* Block type indicator */}
            {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 SpacerBlock 