import React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardMedia from '@mui/material/CardMedia';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import ExtensionIcon from '@mui/icons-material/Extension';
import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
import CardActionArea from '@mui/material/CardActionArea';

interface IProps {
    title?: string;
    text?: string;
    image?: string | null;
    onClick?: () => void;
    action?: boolean;
    actionRef: React.MutableRefObject<HTMLButtonElement | null>;
    onActionClick?: () => void;
};

const BaseCard = ({ title, text, image, onClick, action, actionRef, onActionClick }: IProps) => {
    return (
        <Card
            sx={{
                display: 'flex',
                flexDirection: 'column',
                height: 240
            }}
        >
            <CardActionArea onClick={onClick} sx={{
                display: 'flex',
                flexGrow: 1,
                alignItems: 'stretch'
            }}>
                {image ? (
                    <CardMedia
                        sx={{ flexGrow: 1 }}
                        image={image}
                        title={title}
                    />
                ) : (
                    <Box className={getDefaultBackgroundClass(title)} sx={{
                        flexGrow: 1,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}>
                        <ExtensionIcon sx={{ width: 80, height: 80 }} />
                    </Box>
                )}
            </CardActionArea>
            <CardHeader
                title={<Typography sx={{
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis'
                }}>{title}</Typography>}
                subheader={text}
                action={
                    action ? (
                        <IconButton ref={actionRef} onClick={onActionClick}>
                            <MoreVertIcon />
                        </IconButton>
                    ) : null
                }
            />
        </Card>
    );
};

export default BaseCard;