import { FC } from 'react'
import { ButtonType, ButtonSize, HorizontalAlignment, VerticalAlignment } from '../types/Types'

interface ButtonRendererProps {
    buttons: ButtonType[]
}

const ButtonRenderer: FC<ButtonRendererProps> = ({ buttons }) => {
    if (!buttons || buttons.length === 0) return null

    // تبدیل 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' }}>
                                            <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'
                                                            }}
                                                        >
                                                            <a href={button.link || '#'} style={{
                                                                color: button.textColor,
                                                                textDecoration: 'none',
                                                            }}>
                                                                {button.text}
                                                            </a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    ))}
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    )
}

export default ButtonRenderer