import React, {useEffect, useState} from "react";
import Modal from "react-bootstrap/Modal";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form";
import Table from "react-bootstrap/Table";
import * as EgovNet from "api/egovFetch";

function QuestionModal({svySeq}){

    const [qtList, setQtList] = useState([]);
    const [selectedQt, setSelectedQt] = useState(null);
    const [tempSeq, setTempSeq] = useState(1);

    function getSurveyQt(){
        EgovNet.requestFetch(
            '/admin/survey/info-qt?svySeq='+svySeq,
            {
                method: "GET"
            },
            (resp) => {
                setQtList(resp.result.qtList)
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
    }

    function addQt(){
        const temp = [...qtList]
        temp.push({
            qtSeq: null,
            tempSeq: tempSeq,
            svySeq: svySeq,
            qtTitle: '',
            qtDesc: '',
            qtType: '',
            maxNo: '',
            etcYn: '',
            itemList:[]
        })
        setQtList(temp);
        setTempSeq(tempSeq+1);
    }

    function addItem(){

    }

    function editSurveyQt(e){

    }

    useEffect(() => {
        getSurveyQt()
    }, []);

    useEffect(() => {
        const tempQt = [...qtList];
        tempQt.forEach(function (qt, index){
            if(qt.qtSeq === null){
                if(qt.tempSeq === selectedQt.tempSeq){
                    qt = selectedQt;
                }
            }else if(qt.qtSeq === selectedQt.qtSeq){
                qt = selectedQt;
            }
        })
        setQtList(tempQt);
    }, [selectedQt]);

    return (
        <>
            <Modal.Header closeButton>
                <Modal.Title>질문관리</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Row>
                    <Col xs={5}>
                        <Table>
                            <thead>
                            <tr>
                                <th>질문</th>
                            </tr>
                            </thead>
                            <tbody>
                            {qtList.map(qt=>{
                                return (
                                    <tr>
                                        <td>
                                            <Form.Control type={"text"} defaultValue={qt.qtTitle} onClick={()=>{setSelectedQt(qt)}}/>
                                        </td>
                                    </tr>
                                );
                            })}
                            </tbody>
                            <tfoot>
                            <tr>
                                <td>
                                    <button className={"btn btn_blue_h31"} onClick={addQt}>추가</button>
                                </td>
                            </tr>
                            </tfoot>
                        </Table>
                    </Col>
                    <Col xs={7} className={selectedQt?"":"d-none"}>
                        <Form.Group as={Row} className="mb-3">
                            <Form.Label column sm={3}>
                                질문유형
                            </Form.Label>
                            <Col sm={9} key={`inline-radio`} className={'my-auto'}>
                                <Form.Check inline label="체크박스" name="qtType" type={'radio'} value={1} checked={selectedQt?.qtType === 1} onClick={()=>{setSelectedQt({...selectedQt, qtType:1})}}/>
                                <Form.Check inline label="라디오버튼" name="qtType" type={'radio'} value={2} checked={selectedQt?.qtType === 2} onClick={()=>{setSelectedQt({...selectedQt, qtType:2})}}/>
                                <Form.Check inline label="직접입력" name="qtType" type={'radio'} value={3} checked={selectedQt?.qtType === 3} onClick={()=>{setSelectedQt({...selectedQt, qtType:3})}}/>
                                <Form.Check inline label="이용자만족도" name="qtType" type={'radio'} value={4} checked={selectedQt?.qtType === 4} onClick={()=>{setSelectedQt({...selectedQt, qtType:4})}}/>
                            </Col>
                        </Form.Group>
                        <Form.Group as={Row} className={`mb-3 ${selectedQt?.qtType!==1?'d-none':''}`}>
                            <Form.Label column sm={3}>
                                최대 선택 개수
                            </Form.Label>
                            <Col sm={3}>
                                <Form.Control type="text" name="maxNo" defaultValue={selectedQt?.maxNo} onChange={(e)=>{setSelectedQt({...selectedQt, maxNo:e.target.value})}}/>
                            </Col>
                            <Form.Label column sm={'auto'}>
                                기타 여부
                            </Form.Label>
                            <Col sm={3} className={'my-auto'}>
                                <Form.Check type="checkbox" name="etcYn" checked={selectedQt?.etcYn==='Y'} onClick={(e)=>{setSelectedQt({...selectedQt, etcYn:e.target.checked?'Y':'N'})}}/>
                            </Col>
                        </Form.Group>
                        <Table>
                            <thead>
                            <tr>
                                <th>보기</th>
                            </tr>
                            </thead>
                            <tbody>
                            {selectedQt?.itemList.map((item, index)=>{
                                return (
                                    <tr>
                                        <td>
                                            <Form.Control type={"text"} defaultValue={item.itemNm} value={item.itemNm}
                                                          onChange={(e)=>{
                                                              const qt = {...selectedQt}
                                                              qt.itemList[index].itemNm = e.target.value
                                                              setSelectedQt(qt);
                                                          }}/>
                                        </td>
                                    </tr>
                                );
                            })}
                            </tbody>
                            <tfoot>
                            <tr>
                                <td>
                                    <button className={"btn btn_blue_h31"} onClick={addItem}>추가</button>
                                </td>
                            </tr>
                            </tfoot>
                        </Table>
                    </Col>
                </Row>
            </Modal.Body>
            <Modal.Footer>
                <button type="button" className={"btn btn_blue_h31 px-3"}>저장</button>
            </Modal.Footer>
        </>
    );
}

export default QuestionModal;