import { FC } from 'react'
import { ButtonType, ButtonSize, HorizontalAlignment, VerticalAlignment, ElementType, PersonalityDataType, SectionName } from '../types/Types'
import { usePersonalityStore } from '../store/Store'

interface ButtonRendererProps {
    buttons: ButtonType[]
    itemId: string
    sectionKey: keyof PersonalityDataType
}

const ButtonRenderer: FC<ButtonRendererProps> = ({ buttons, itemId, sectionKey }) => {
    const { selectedElement, setSelectedElement } = usePersonalityStore()

    if (!buttons || buttons.length === 0) return null

    const handleButtonClick = (e: React.MouseEvent, buttonId: string) => {

        e.stopPropagation() // Prevent bubbling to item/section handlers
        e.preventDefault() // جلوگیری از اجرای لینک

        setSelectedElement({
            type: ElementType.BUTTON,
            elementId: buttonId,
            itemId,
            sectionKey: sectionKey as SectionName,
        })
    }

    // تبدیل enum به string برای HTML attributes
    const getHorizontalAlign = (alignment?: HorizontalAlignment) => {
        switch (alignment) {
            case HorizontalAlignment.LEFT:
                return 'left'
            case HorizontalAlignment.RIGHT:
                return 'right'
            case HorizontalAlignment.CENTER:
            default:
                return 'center'
        }
    }

    const getVerticalAlign = (verticalAlignment?: VerticalAlignment) => {
        switch (verticalAlignment) {
            case VerticalAlignment.TOP:
                return 'top'
            case VerticalAlignment.BOTTOM:
                return 'bottom'
            case VerticalAlignment.MIDDLE:
            default:
                return 'middle'
        }
    }

    return (
        <table width="100%" cellPadding="0" cellSpacing="0" border={0} style={{ borderCollapse: 'collapse' }}>
            <tbody>
                <tr>
                    <td
                        align={getHorizontalAlign(buttons[0]?.alignment)}
                        valign={getVerticalAlign(buttons[0]?.verticalAlignment)}
                        style={{ width: '100%' }}
                    >
                        <table cellPadding="0" cellSpacing="0" border={0} style={{ borderCollapse: 'collapse' }}>
                            <tbody>
                                <tr>
                                    {buttons.slice(0, 2).map((button, buttonIndex) => (
                                        <td key={button.id} style={{ paddingRight: buttonIndex === 0 && buttons.length > 1 ? '4px' : '0' }}>
                                            <div
                                                data-element-type="button"
                                                onClick={(e) => handleButtonClick(e, button.id)}
                                                style={{
                                                    cursor: 'pointer',
                                                    outline: selectedElement?.elementId === button.id ? '2px dashed #0038FF' : 'none',
                                                    outlineOffset: '2px',
                                                    borderRadius: '4px',
                                                    padding: '2px',
                                                    display: 'inline-block'
                                                }}
                                            >
                                                <table cellPadding="0" cellSpacing="0" border={0} style={{
                                                    borderCollapse: 'collapse',
                                                    backgroundColor: button.backgroundColor,
                                                    border: button.isBorder ? `${button.borderSize}px solid ${button.borderColor}` : 'none',
                                                    borderRadius: '4px'
                                                }}>
                                                    <tbody>
                                                        <tr>
                                                            <td
                                                                align="center"
                                                                valign="middle"
                                                                style={{
                                                                    padding: button.size === ButtonSize.SMALL ? '2px 4px' : button.size === ButtonSize.MEDIUM ? '4px 8px' : '8px 12px',
                                                                    fontSize: button.size === ButtonSize.SMALL ? '11px' : button.size === ButtonSize.MEDIUM ? '13px' : '15px',
                                                                    color: button.textColor,
                                                                    textDecoration: 'none',
                                                                    whiteSpace: 'nowrap',
                                                                    maxWidth: 'fit-content',
                                                                    overflow: 'hidden',
                                                                    textOverflow: 'ellipsis',
                                                                    pointerEvents: 'none' // Prevent double click handling
                                                                }}
                                                            >
                                                                <span style={{
                                                                    color: button.textColor,
                                                                    textDecoration: 'none',
                                                                    pointerEvents: 'none'
                                                                }}>
                                                                    {button.text}
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </td>
                                    ))}
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    )
}

export default ButtonRenderer 