import React, {useState} from 'react';
import {
  Box,
  Dialog,
  DialogTitle,
  Slide
} from '@mui/material';

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

export default function ModalEditMemo ({ show, content, handleClose, handleUpdateMemo }) {
  const [memo, setMemo] = useState(content ? content : '');

  const handleChange = (memo) => {
    setMemo(memo);
  }

  const handleBlur = (memo) => {
    handleUpdateMemo(memo);
  }

	return (
    <Dialog
      open={show}
      TransitionComponent={Transition}
      keepMounted
      aria-describedby="alert-dialog-slide-description"
      onClose={handleClose}
    >
      <DialogTitle sx={{padding:'20px 10px',textAlign:'center', borderBottom:'1px solid rgb(239 236 236)'}}>
        <span className="ft-16 text-center font-weight-bold">メモ</span>
      </DialogTitle>
      <Box sx={{ p:'10px', pb:'10px'}}>
        <Box id="alert-dialog-slide-description">
          <textarea value={ memo } onChange={e => handleChange(e.target.value)} onBlur={e => handleBlur(e.target.value)} style={{ height: '300px', borderRadius:5, background:'#F0F0F0', padding:'12px', fontSize:'16px' }} />
        </Box>
      </Box>
    </Dialog>
	);
}

