import { FC, useState } from 'react';

import Box from '@material-hu/mui/Box';
import Dialog from '@material-hu/mui/Dialog';
import DialogContent from '@material-hu/mui/DialogContent';
import IconButton from '@material-hu/mui/IconButton';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

import { isMobile } from 'src/utils/recognitions';

export type CardHeaderProps = {
  title: string;
  Icon?: any;
  message?: string;
};

export const CardHeader: FC<CardHeaderProps> = props => {
  const { title, Icon = null, message } = props;

  const [openTooltipDialog, setOpenTooltipDialog] = useState(false);

  return (
    <Box sx={{ p: 2, display: 'flex', alignItems: 'center' }}>
      <Typography
        color="textPrimary"
        variant="h5"
        component="h1"
      >
        {title}
      </Typography>
      {Icon && !isMobile() && (
        <Tooltip
          title={message}
          placement="top"
        >
          <Icon
            fontSize="small"
            sx={{ ml: 1.6 }}
          />
        </Tooltip>
      )}
      {Icon && isMobile() && (
        <IconButton onClick={() => setOpenTooltipDialog(true)}>
          <Icon
            fontSize="small"
            sx={{ ml: 1.6 }}
          />
        </IconButton>
      )}
      <Dialog
        open={openTooltipDialog}
        onClose={() => setOpenTooltipDialog(false)}
      >
        <DialogContent>{message}</DialogContent>
      </Dialog>
    </Box>
  );
};

export default CardHeader;