import React, { useEffect, useState } from 'react';
import {
    Box,
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
    Slide,
    Button,
    IconButton,
    Divider,
    Stack,
    Typography
} from '@mui/material';
import { LoadingButton } from '@material-ui/lab';
import axios from 'axios';


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


export default function ModalEditMemo({ show, content, handleClose, handleUpdateMemo, meetingId}){


    const [edit_flag, setEditFlag] = useState(false);
    const [memo, setMemo] = useState('');
    const [submit, setSubmit] = useState(false);
    const [_422errors, set422Errors] = useState({memo:''})


    const handleEdit = () => {
        setEditFlag(!edit_flag);
        setMemo(content ? content : '');
    }

    const handleSubmit = () => {
        setSubmit(true);
        set422Errors({memo:''});
        const post = { memo: memo,  meeting_id: meetingId};
        axios.put('/api/fathers/meetings/updateMemo', post)
        .then(res=>{
            setSubmit(false);
            if(res.data.status_code == 422){
                set422Errors(res.data.error_messages);
            }
            else{
                setEditFlag(false);
                handleUpdateMemo(res, memo);
            }
        })
    }

    const handleMClose = () => {
        setEditFlag(false);
        set422Errors({memo:''});
        handleClose();
    }

	return (
        <Dialog
            open={show}
            TransitionComponent={Transition}
            keepMounted
            aria-describedby="alert-dialog-slide-description"
            onClose={handleMClose}
        >
            <DialogTitle sx={{padding:'20px 10px',textAlign:'center', borderBottom:'1px solid rgb(239 236 236)'}}>
                <span className="ft-18 text-center font-weight-bold">メモ</span>
            </DialogTitle>
            <Box sx={{ p:'15px', pb:'15px'}}>
                <Box id="alert-dialog-slide-description">
                    {
                        edit_flag && 
                            <textarea value={ memo } onChange={e=>setMemo(e.target.value)} style={{ height: '175px', borderRadius:5 }} className={`${ _422errors.memo && 'is-invalid c-input__target'} `}  />
                    }
                    {
                        (edit_flag && _422errors.memo) &&
                            <span className="l-alert__text--error ft-16 ft-md-14">
                                {_422errors.memo}
                            </span> 
                    }
                    {
                        !edit_flag && 
                        <Typography component='p' sx={{ minHeight:'175px', whiteSpace:'pre-wrap', bgcolor:'#F0F0F0', p:'15px' }} className="ft-16 text-black">
                            {content ? content : '未入力'}
                        </Typography>
                    }
                </Box>
            </Box>
            <DialogActions style={{justifyContent:'space-evenly', padding:'18px 10px', borderTop:'1px solid rgb(239 236 236)'}}>
                <Button onClick={handleEdit} size="small">
                    <span className="ft-16 font-weight-bold text-black">
                        { !edit_flag ? '編集' : '削除'}
                    </span>
                </Button>
                <LoadingButton variant="text"
                    onClick={handleSubmit}
                    loading={submit}
                    disabled={!edit_flag}
                    size="small">
                    <span className={`ft-16 font-weight-bold ${!submit && edit_flag ? 'text-black' : 'text-gray'}`}>更新</span>
                </LoadingButton>
            </DialogActions>
        </Dialog>
	)
}