import React, {useEffect, useState} from "react";
import Modal from "react-bootstrap/Modal";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import * as EgovNet from "api/egovFetch";
import CODE from "constants/code";
import DatePicker from "react-datepicker";

function SurveyModal({savedInfo, reloadFunction}){

    const [survey, setSurvey] = useState({
        svySeq: savedInfo?savedInfo.svySeq:null,
        svyTitle: savedInfo?savedInfo.svyTitle:'',
        svyDesc: savedInfo?savedInfo.svyDesc:'',
        svyStartDt: savedInfo?new Date(savedInfo.svyStartDt):new Date(),
        svyEndDt: savedInfo?new Date(savedInfo.svyEndDt):new Date(),
    })

    function editSurvey(e){
        e.preventDefault();
        e.stopPropagation();
        EgovNet.requestFetch(
            '/admin/survey/info',
            {
                method: "PUT",
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify(survey)
            },
            (resp) => {
                if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
                    alert("저장되었습니다.")
                    reloadFunction();
                }else{
                    alert(resp.resultMessage)
                }
            }
        )
    }

    function deleteSurvey(e,svySeq){
        e.preventDefault();
        e.stopPropagation();
        EgovNet.requestFetch(
            '/admin/survey/info',
            {
                method: "DELETE",
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify({svySeq:svySeq})
            },
            (resp) => {
                if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
                    alert("삭제되었습니다.")
                    reloadFunction();
                }else{
                    alert(resp.resultMessage)
                }
            }
        )
    }

    return (
        <>
            <Modal.Header closeButton>
                <Modal.Title>
                    {savedInfo!==undefined?savedInfo?.svyTitle:'설문 생성'}
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Form onSubmit={(e) =>{editSurvey(e)}} noValidate>
                    <Form.Group as={Row} className="mb-3">
                        <Form.Label column sm={3}>
                            제목
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control type="email" name="svyTitle" required defaultValue={survey.svyTitle}
                                          onChange={(e)=>{setSurvey({...survey, svyTitle:e.target.value})}}/>
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3">
                        <Form.Label column sm={3}>
                            설명
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control as={"textarea"} name="svyDesc" rows={3} defaultValue={survey.svyDesc}
                                          onChange={(e)=>{setSurvey({...survey, svyDesc:e.target.value})}}/>
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3">
                        <Form.Label column sm={3}>
                            설문기간
                        </Form.Label>
                        <Col sm={9}>
                            <DatePicker selectsRange inline format={"yyyy-MM-dd"}
                                        selected={survey.svyEndDt} minDate={new Date()}
                                        startDate={survey.svyStartDt} endDate={survey.svyEndDt}
                                        onChange={(dates)=>{
                                            const [start, end] = dates;
                                            setSurvey({...survey, svyStartDt:start, svyEndDt: end})
                                        }}/>
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} className="mb-3">
                        <Form.Label column sm={12}>
                            * 목록에서 사용 여부를 변경해야 설문이 노출됩니다.
                        </Form.Label>
                    </Form.Group>
                    <Row className="mb-3">
                        {survey.svySeq?
                            <Col xs={2}>
                                <button className={"btn btn_red_h31"} onClick={(e)=>{deleteSurvey(e, survey.svySeq)}}>삭제</button>
                            </Col>
                            :''}
                        <Col xs={survey.svySeq?8:10}></Col>
                        <Col xs={2}>
                            <button type="submit" className={"btn btn_blue_h31"}>저장</button>
                        </Col>
                    </Row>
                </Form>
            </Modal.Body>
        </>
    );
}

export default SurveyModal;