import { FC, useState } from 'react'
import { TextBlock as TextBlockType } from '../../types/blocks'
import ReactQuill from 'react-quill-new'

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

const TextBlock: FC<TextBlockProps> = ({
    block,
    isSelected,
    onUpdate,
    onSelect,
    isEditing = false
}) => {
    const [localContent, setLocalContent] = useState(block.data.content)

    const handleContentChange = (content: string) => {
        setLocalContent(content)
        onUpdate({
            data: {
                ...block.data,
                content
            }
        })
    }

    const blockStyle = {
        fontSize: `${block.style.fontSize}px`,
        fontWeight: block.style.fontWeight,
        color: block.style.color,
        textAlign: block.style.textAlign as 'left' | 'center' | 'right',
        lineHeight: block.style.lineHeight,
        fontFamily: block.style.fontFamily,
        backgroundColor: block.style.backgroundColor,
        padding: block.style.padding ?
            `${block.style.padding.top}px ${block.style.padding.right}px ${block.style.padding.bottom}px ${block.style.padding.left}px` :
            '8px',
        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',
        borderRadius: block.style.borderRadius ? `${block.style.borderRadius}px` : '0',
        border: isSelected ? '2px dashed #0038FF' : 'none',
        cursor: 'pointer',
        minHeight: '40px',
        position: 'relative' as const
    }

    // Process variables in content for preview
    const processVariables = (content: string) => {
        return content.replace(/\{\{(\w+)\}\}/g, (match, key) => {
            // Replace with sample data for preview
            const sampleData: Record<string, string> = {
                name: 'احمد محمدی',
                email: 'ahmad@example.com',
                company: 'شرکت نمونه',
                date: '۱۴۰۳/۱۲/۰۱'
            }
            return sampleData[key] || match
        })
    }

    return (
        <div
            style={blockStyle}
            onClick={onSelect}
            className="text-block-wrapper"
        >
            {isEditing ? (
                <ReactQuill
                    modules={{
                        toolbar: [
                            [{ header: '1' }, { header: '2' }, { font: [] }],
                            [{ list: 'ordered' }, { list: 'bullet' }],
                            ['bold', 'italic', 'underline'],
                            ['link'],
                            [{ align: [] }],
                            ['clean']
                        ]
                    }}
                    theme="snow"
                    value={localContent}
                    onChange={handleContentChange}
                    style={{
                        border: 'none',
                        minHeight: '60px'
                    }}
                    className='text-sm'
                />
            ) : (
                <div
                    dangerouslySetInnerHTML={{
                        __html: processVariables(localContent)
                    }}
                    style={{
                        minHeight: '20px',
                        width: '100%'
                    }}
                />
            )}

            {/* 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'
                    }}
                >
                    متن
                </div>
            )}
        </div>
    )
}

export default TextBlock 