import { memo } from 'react';
import Dialog from '@mui/material/Dialog';
import type { DialogProps as MiuDialogProps } from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import type { DialogActionsProps as MuiDialogActionsProps } from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import type { DialogContentProps as MuiDialogContentProps } from '@mui/material/DialogContent';
import type { AvatarProps } from '../../avatar';
import { Avatar } from '../../avatar';
import createClasses from './style';
import { DialogTitle } from '../dialog-title';
import type { DialogTitleProps } from '../dialog-title';
import { Button } from '../../button';
import YouTube, { YouTubeProps } from 'react-youtube';

export interface ModalProps extends MiuDialogProps {
  id: string;
  /**
   * Callback to be fired on close icon click.
   */
  onClose?: () => void;
  /**
   * Properties for perimeter_81 `DialogTitle` component.
   */
  dialogTitleProps?: DialogTitleProps;
  /**
   * Properties for material-ui `DialogContent` component.
   */
  dialogContentProps?: MuiDialogContentProps;
  /**
   * Properties for material-ui `DialogActions` component.
   */
  dialogActionsProps?: MuiDialogActionsProps;
  avatarProps?: AvatarProps;
  videoUrl?: string;
  videoBtnTxt?: string;
  youtubeProps?: YouTubeProps;
  modalCustomBgImage?: string;
  videoBtnEvent?: (e?: Event) => void;
}

const Modal = (props: ModalProps) => {
  const {
    open,
    onClose,
    dialogTitleProps,
    dialogContentProps,
    dialogActionsProps,
    avatarProps,
    videoUrl,
    videoBtnTxt,
    youtubeProps,
    modalCustomBgImage,
    videoBtnEvent,
    ...other
  } = props;

  const classes = createClasses({ modalCustomBgImage });

  const videoBtnFunc = () => {
    onClose?.();
    videoBtnEvent?.();
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      aria-labelledby="modal-dialog-title"
      aria-describedby="modal-dialog-content"
      aria-modal="true"
      classes={{
        paper: videoUrl || youtubeProps ? classes.videoModal : classes.modal
      }}
      {...other}
    >
      {dialogTitleProps && (
        <DialogTitle id="modal-dialog-title" onClose={onClose} {...dialogTitleProps}>
          {!dialogTitleProps.icon && avatarProps && (
            <Avatar className={classes.avatar} {...avatarProps} />
          )}
          {dialogTitleProps.children}
        </DialogTitle>
      )}
      {videoUrl || youtubeProps ? (
        <>
          <DialogTitle className={classes.icon} id="modal-dialog-title" onClose={onClose} />
          {youtubeProps ? (
            <YouTube className={classes.video} {...youtubeProps} />
          ) : (
            <iframe
              className={classes.video}
              title="video"
              width="832"
              height="468"
              frameBorder="0"
              src={videoUrl}
            />
          )}
          <DialogActions
            className={classes.button}
            children={
              <Button data-testid="videoBtn" color="primary" size="medium" onClick={videoBtnFunc}>
                {videoBtnTxt}
              </Button>
            }
          />
        </>
      ) : null}
      {dialogContentProps && <DialogContent id="modal-dialog-content" {...dialogContentProps} />}
      {dialogActionsProps && <DialogActions {...dialogActionsProps} />}
    </Dialog>
  );
};

const m = memo(Modal);
export { m as Modal };