import React, {useCallback, useEffect, useState} from 'react';
import { Link } from 'react-router-dom';

import URL from 'constants/url';

import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
import * as EgovNet from "../../../api/egovFetch";
import Modal from "react-bootstrap/Modal";
import SurveyModal from "./survey/SurveyModal";
import QuestionModal from "./survey/QuestionModal";


function Survey({}) {

    const [listTag, setListTag] = useState([]);
    const [show, setShow] = useState(false);
    const [modalSize, setModalSize] = useState("md");
    const [modalBody, setModalBody] = useState();

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const retrieveList = useCallback(() => {
        handleClose()
        EgovNet.requestFetch(
            '/admin/survey/list',
            {
                method: "GET"
            },
            (resp) => {
                let mutListTag = [];

                setListTag([]);
                // 리스트 항목 구성
                resp.result.surveyList.forEach(function (item, index) {
                    mutListTag.push(
                        <div className={"list_item"} key={"surveyListDiv_"+index}>
                            <div>{item.svyTitle}</div>
                            <div>{item.svyStartDt}~{item.svyEndDt}</div>
                            <div><button className={"btn btn_blue_h31 px-1"} onClick={()=>{editSurveyQt(item)}}>질문관리</button></div>
                            <div></div>
                            <div><button className={"btn btn_blue_h31 px-1"}>설문지 보기</button></div>
                            <div><button className={"btn btn_blue_h31 px-1"}>통계 보기</button></div>
                            <div>
                                <button className={"btn btn_blue_h31 px-1"} onClick={()=>{editSurvey(item)}}>수정</button>
                            </div>
                            <div>
                                <button className={"btn btn_red_h31 px-1"} onClick={()=>{editSurvey(item)}}>삭제</button>
                            </div>
                        </div>
                    );
                });
                if(!mutListTag.length) mutListTag.push(<p className="no_data" key="0">검색된 결과가 없습니다.</p>); // 게시판 목록 초기값
                setListTag(mutListTag);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
    },[]);

    function editSurvey(item){
        handleShow();
        setModalSize("md")
        setModalBody(<SurveyModal savedInfo={item} reloadFunction={retrieveList}></SurveyModal>);
    }

    function editSurveyQt(item){
        handleShow();
        setModalSize("xl")
        setModalBody(<QuestionModal svySeq={item.svySeq}></QuestionModal>);
    }

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

    return (
        <div className="container">
             <div className="c_wrap">
                 <div className="location">
                     <ul>
                         <li><Link to={URL.MAIN} className="home">Home</Link></li>
                         <li><Link to={URL.ADMIN}>사이트 관리</Link></li>
                         <li>컨텐츠 관리</li>
                         <li>설문 관리</li>
                     </ul>
                 </div>

                <div className="layout">
                    <EgovLeftNav></EgovLeftNav>

                    <div className="contents " id="contents">
                        <div className="top_tit">
                            <h1 className="tit_1">설문 관리</h1>
                        </div>

                        <div className="board_list surveyList">
                            <div className="head">
                                <span>제목</span>
                                <span>참여기한</span>
                                <span>질문관리</span>
                                <span>사용여부</span>
                                <span>설문지 보기</span>
                                <span>통계 보기</span>
                                <span></span>
                                <span><button className={"btn btn_blue_h31 px-1"} onClick={()=>{editSurvey(undefined)}}>추가</button></span>
                            </div>
                            <div className="result">
                                {listTag}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <Modal size={modalSize} show={show} onHide={handleClose} keyboard={false} scrollable>
                {modalBody}
            </Modal>
        </div>
    );
}

export default Survey;