import React from 'react';

import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import SkSmtpPanel from './SkSmtpPanel';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import { Typography } from '@material-ui/core';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';


function SkSmtp({ record, onClose }) {

  return (
    <Dialog
      open={true}
      onClose={onClose}
      maxWidth="xl"
      style={{ borderRadius: 0 }}
      PaperComponent={DpPaperComponent}
      BackdropComponent={DpBackgroundDrop}
    >
      <div className="boxhead"></div>
      <DialogContent style={{ padding: 0, width: '30rem', overflowX: 'hidden' }}>
        <DpAppBar position="sticky">
          <Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1 }}>{record.stnm}</Typography>
          <DpCloseButton onClick={onClose} />
        </DpAppBar>
        <SkSmtpPanel personels={record.personels || []} txt={record.txt} />
      </DialogContent>
      <div className="boxfoot"></div>
    </Dialog>
  )
}

export default React.memo(SkSmtp);