import React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import CloseIcon from '@mui/icons-material/Close';

interface Dya {
  id: string | number;
  latitude: number;
  longitude: number;
  dya_text: string;
  agb_dyncol: string | null;
  html_info: string | null;
  type: string;
  department_id: number;
}

interface InfoCardProps {
  dya: Dya | null;
  onClose: () => void;
}

const infoCardStyle = {
  shell: {
    minWidth: 280,
    maxWidth: 380,
    width: 'min(90vw, 380px)',
    transform: 'translateX(110%)',
    transition: 'transform 260ms ease',
  },
  visible: {
    transform: 'translateX(0)',
  },
  card: {
    maxHeight: '48vh',
    display: 'flex',
    flexDirection: 'column',
  },
  content: {
    overflowY: 'auto',
  },
  header: (theme) => ({
    paddingBottom: theme.spacing(1),
  }),
};

const InfoCard: React.FC<InfoCardProps> = ({ dya, onClose }) => {
  return (
    <div
      className={'overlay-card'}
      style={{ ...infoCardStyle.shell, ...(dya ? infoCardStyle.visible : {}) }}
    >
      <Card sx={infoCardStyle.card} elevation={0}>
        {dya && (
          <>
            <CardHeader
              sx={infoCardStyle.header}
              action={
                <IconButton aria-label='close' onClick={onClose}>
                  <CloseIcon />
                </IconButton>
              }
              titleTypographyProps={{ variant: 'h6' }}
              title={`ID: ${dya.id}`}
              subheader={`Type: ${dya.type}`}
            />
            <CardContent sx={infoCardStyle.content}>
              {dya.html_info ? (
                <div dangerouslySetInnerHTML={{ __html: dya.html_info }} />
              ) : (
                <Typography variant='body2'>{dya.dya_text}</Typography>
              )}
            </CardContent>
          </>
        )}
      </Card>
    </div>
  );
};

export default InfoCard;