import React, { useEffect, useState } from 'react';
import { useHistory, Link } from 'react-router-dom';
import axios from 'axios';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import Slide from '@mui/material/Slide';

import Alert from '../component/alert';


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


export default function ModalSettingNotify({show, handleClose, meetingId}){

  const [unapproval, setUnapproval ] = useState([]);
  const [approval, setApproval ] = useState([]);
  const [isApproval, setIsApproval ] = useState(false);
  const [_success, setSuccess] = useState('');
  const [_400error, set400Error] = useState('');

  useEffect(() => {
    axios.get('/api/fathers/meeting/approvals/listChildrenOfApprovel', {params: { meeting_id: meetingId }})
    .then((response) => {
      if(response.data.status_code==200){
        console.log(response.data.params);
        setApproval(response.data.params);
      } 
    });
  }, []);

  useEffect(() => {
    axios.get('/api/fathers/meeting/approvals/listChildrenOfUnapprovel', {params: { meeting_id: meetingId }})
    .then((response) => {
      if(response.data.status_code==200){
        console.log(response.data.params);
        setUnapproval(response.data.params);
      }
    });
  }, []);

  const settingNotify = (tel) => {
    const formdata = new FormData();
    formdata.append('tel', tel);
    formdata.append('meeting_id', meetingId);
    axios.post('/api/fathers/approvalNotification', formdata)
    .then(response=>{
      switch(response.data.status_code){
        case 200: setSuccess('SMSの送信に成功しました!'); break;
        case 400: setSuccess('SMSの送信に失敗しました。'); break;
      }
    })
  }
  

	return (
    <Dialog
    open={show}
    TransitionComponent={Transition}
    keepMounted
    aria-describedby="alert-dialog-slide-description"
    onClose={handleClose}
    id="SettingNotifyModal"
    >
        <DialogTitle className="px-0 pt-3">
            <div className="modal-tab-area ft-16">
              <div onClick={e => {setIsApproval(false); }} className={`modal-tab-label ${isApproval ? "" : "is-active"}`}><span>未承知</span></div>
              <div onClick={e => {setIsApproval(true); }}  className={`modal-tab-label ${!isApproval ? "" : "is-active"}`}><span>承知済み</span></div>
           </div>
        </DialogTitle>
        <DialogContent>
            <div className={ `modal-content border-0 ${!isApproval ? "is-active" : ""}` } id="item01">
              { 
                unapproval.length > 0 ?
                unapproval.map((item, ki) =>
                  <div className="modal-content-item" key={ki}>
                    <div className="user-wrap">
                      <Link to={`/p-account/child/detail/${item.child.id}`} >
                        <div className="user-avatar">
                          <img alt="name" className="avatar-img" src={item.child.image} />
                        </div>
                        <p className="user-name">{item.child.first_name}　{item.child.last_name}</p>
                      </Link>
                    </div>
                    <div className="p-notification-btn">
                      <a onClick={e => settingNotify(item.id)} className="btn-default btn-yellow btn-notification btn-r3 btn-h30 btn-w100p btn-fz14">
                        <span>通知</span>
                      </a>
                    </div>
                  </div>
                )
                : <p className="text-center py-2 ft-xs-15">データはありません。</p>
              }
            </div>    
            <div className={ `modal-content border-0 ${isApproval ? "is-active" : ""}` } id="item02">
              { 
                approval.length > 0 ?
                approval?.map((item, kj) => 
                  <div className="modal-content-item" key={kj}>
                    <div className="user-wrap">
                      <Link to={`/p-account/child/detail/${item.child.id}`} >
                        <div className="user-avatar">
                          <img alt="name" className="avatar-img" src={item.child.image} />
                        </div>
                        <p className="user-name">{item.child.first_name}　{item.child.last_name}</p>
                      </Link>
                    </div>
                  </div>
                )
                : <p className="text-center py-2 ft-xs-15">データはありません。</p>
              }
            </div>
            { _400error && <Alert type="fail">{_400error}</Alert> }
            { _success && <Alert type="success">{_success}</Alert>}
        </DialogContent>
    </Dialog>
	)
}