import React, { useState, useEffect, useRef, useMemo } from 'react'
import { trigger } from 'educoder'
import { Input, Checkbox } from "antd";
import CourseGroupChooser from '../CourseGroupChooser'
import ModalWrapper from "../../common/ModalWrapper"
import axios from 'axios'
/** 
    arg_course_groups   选中的id数组
    joinCourseGroup     选中时触发   joinCourseGroup(checkedValues, item, index)  传入item：数据对象，index： 数据对象index
    checkAllValue       是否全选
    onCheckAllChange    全选     onCheckAllChange(e, item, index)
    course_groups   所有的group
*/
function CourseGroupChooserModal({ course_groups = [], isAdminOrCreator, item, index,
            setVisible, visible, record = {}, props = {}, fetchAll
         }) {
            // , arg_course_groups, checkAllValue  , onCheckAllChange, joinCourseGroup
    const [checkAllValue, setCheckAllValue] = useState(true)
    const [arg_course_groups, setArg_course_groups] = useState(course_groups.map(item => item.id))
    const modalEl = useRef(null);
    useEffect(() => {
        setCheckAllValue(true)
        setArg_course_groups(course_groups.map(item => item.id))
    }, [course_groups, visible])

    useEffect(() => {
        if (visible != undefined) {
            modalEl.current.setVisible(true)
        }
    }, [visible])

    const joinCourseGroup = (checks) => {
        setArg_course_groups(checks)
    }
    const onCheckAllChange = (e) => {
        if (checkAllValue) {
            setArg_course_groups([])
        } else {
            setArg_course_groups(course_groups.map(item => item.id))
        }
        setCheckAllValue(!checkAllValue)
    }
    const onOk = async () => {
        console.log(checkAllValue, arg_course_groups)
        let approval = 1
        const courseId = props.match.params.coursesId    
        let url = `/courses/${courseId}/teacher_application_review.json`
        const response = await axios.post(url, {
            user_id: record.user_id,
            application_id: record.application_id,
            approval: approval,
            group_id: arg_course_groups
        })
        props.showNotification(`已${approval == 1? '同意' : '拒绝'}`)
        fetchAll(1)
        modalEl.current.setVisible(false)
    }
    return (
        <ModalWrapper
            ref={modalEl}
            width="600px"
            title={`同意`}
            visible={visible}
            onOk={onOk}
            className="courseGroupChooserModal"
        >   
            <style>{`
                .courseGroupChooserModal .description {
                    font-size: 16px;
                    text-align: center;
                    margin-bottom: 20px;
                }
                .courseGroupChooserModal .drop_down_menu  {
                    position: relative;
                    top: auto;
                    box-shadow: none;
                    padding-top: 12px;
                }
                .courseGroupChooserModal .drop_down_menu .mainGroup{
                    background: #f2f9ff;
                    padding: 0 20px;
                }
                .courseGroupChooserModal .drop_down_menu li:hover,.courseGroupChooserModal  .drop_down_normal li:hover{
                    background: #f2f9ff;
                }
                .courseGroupChooserModal .drop_down_menu .mainGroup.ant-checkbox-group {
                    width: 100%;
                    height: 300px;
                }
                .courseGroupChooserModal .drop_down_search {
                    margin: 0;
                    margin-bottom: 10px;
                }
                .courseGroupChooserModal .drop_down_menu li {
                    padding: 0px;
                }
                .courseGroupChooserModal .drop_down_menu .drop_down_btn {
                    padding: 0px 20px;
                    margin: 0;
                }
            `}</style>
            {/* <React.Fragment>
            <React.Fragment> */}
                <div className="description">确认同意TA的加入，并设置TA的分班管理权限</div>
                <CourseGroupChooser
                    {...{ checkAllValue, isAdminOrCreator, course_groups, arg_course_groups, item, index,
                            joinCourseGroup, onCheckAllChange, alwaysShow: true }}
                ></CourseGroupChooser>
           
        </ModalWrapper>
    )
}
export default (CourseGroupChooserModal)