import React from 'react';
import { ModalType, ModalPosition } from './core/types';
import TableModal from './TableModal';

interface TableContent {
    columns: Array<{
        field: string;
        header: string;
    }>;
    data: Array<Record<string, unknown>>;
}

interface ModalFactoryProps {
    id: string;
    type: ModalType;
    position: ModalPosition;
    style?: {
        backgroundColor?: string;
    };
    content?: TableContent | React.ReactNode;
    onClose: (id: string) => void;
}

const ModalFactory: React.FC<ModalFactoryProps> = ({ id, type, position, style, content, onClose }) => {
    const renderContent = (): React.ReactNode => {
        if (!content) return <div>Empty modal</div>;

        switch (type) {
            case 'table':
                if (typeof content === 'object' && 'columns' in content && 'data' in content) {
                    return <TableModal content={content as TableContent} />;
                }
                return <div>Invalid table content</div>;
            default:
                return content as React.ReactNode;
        }
    };

    return (
        <div
            className="bg-white border shadow-lg p-4 absolute"
            style={{
                left: `${position.x}%`,
                top: `${position.y}%`,
                transform: 'translate(-50%, -50%)',
                width: position.width,
                height: position.height,
                backgroundColor: style?.backgroundColor || 'white'
            }}
        >
            <div className="flex justify-between items-center mb-4">
                <div className="font-semibold">Data Table</div>
                <button className="hover:bg-gray-100 rounded-full p-1" onClick={() => onClose(id)}>
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
                    </svg>
                </button>
            </div>
            <div className="h-[calc(100%-4rem)] overflow-hidden">
                {renderContent()}
            </div>
        </div>
    );
};

export default ModalFactory; 