import React, { useState, useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import DatePicker from "react-datepicker";

import EgovAttachFile from 'components/EgovAttachFile';
import RichTextEditor from "../../../../components/editor/RichTextEditor";
import CODE from 'constants/code';


import * as EgovNet from 'api/egovFetch';
import URL from 'constants/url';

import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';

import styled from "styled-components";

const StyledDiv = styled.div`

    .board_view2 {
        margin-bottom: 30px;
    }

    .board_btn_area {

        margin-top: 70px;
    }

`;

function PopupWriter(props) {
    
    const navigate = useNavigate();
    const location = useLocation();

    const [modeInfo, setModeInfo] = useState({ mode: props.mode });
    const [text, setText] = useState("");
    const [popupDetail, setScheduleDetail] = useState({ startDate: new Date(), endDate: new Date() });

    const [schdulBgndeHH, setSchdulBgndeHH] = useState();
    const [schdulBgndeMM, setSchdulBgndeMM] = useState();
    const [schdulEnddeHH, setSchdulEnddeHH] = useState();
    const [schdulEnddeMM, setSchdulEnddeMM] = useState();
    const [boardAttachFiles, setBoardAttachFiles] = useState();

    useEffect(function () {
        initMode();
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
   
    const formValidator = (formData) => {
        if (formData.get('title') === null || formData.get('title') === "") {
            alert("제목은 필수 값입니다.");
            return false;
        }
        
        if (formData.get('schdulBgnde') > formData.get('schdulEndde')) {
            alert("종료일시는 시작일시보다 앞 설 수 없습니다.");
            return false;
        }
        if (formData.get('contents') === null || formData.get('contents') === "") {
            alert("내용은 필수 값입니다.");
            return false;
        }
        return true;
    }

    const initMode = () => {

        // props.mode 값이 없으면 에러가 발생한다.
        switch (props.mode) {
            case CODE.MODE_CREATE:
                setModeInfo({
                    ...modeInfo,
                    modeTitle: "등록",
                    method : "POST",
                    editURL: '/contents/api/popup-manage'
                });
                break;
            case CODE.MODE_MODIFY:
                setModeInfo({
                    ...modeInfo,
                    modeTitle: "수정",
                    method : "PUT",
                    editURL: '/contents/api/popup-manage'
                });
                break;
			default:
                navigate({pathname: URL.ERROR}, {state: {msg : ""}});
        }
        //retrieveDetail();
    }

    

    const createPopup = () => {
        const formData = new FormData();
        
        for (let key in popupDetail) {
            if ( key === 'startDate' ) {
                formData.append(key, getDateFourteenDigit( popupDetail[key] ));
            } else if( key === 'endDate' ) {
                formData.append(key, getDateFourteenDigit( popupDetail[key] ));
            } else {
                formData.append(key, popupDetail[key]);
            }
        }

        //게시글 내용
        formData.append("contents", text);        

        if (formValidator(formData)) {
            const requestOptions = {
                method: modeInfo.method,
                body: formData
            }

            if (modeInfo.mode === CODE.MODE_MODIFY) {
                modeInfo.editURL = `${modeInfo.editURL}/${location.state?.schdulId}`;
            }
            EgovNet.requestFetch(modeInfo.editURL,
                requestOptions,
                (resp) => {
                    if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
                        navigate({ pathname: URL.ADMIN_SCHEDULE });
                    } else {
                        navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
                    }
                }
            );
        }

    }

    const onClickDeleteSchedule = (schdulId) => {
        const deleteBoardURL = `/schedule/${schdulId}`;

        const requestOptions = {
            method: "DELETE",
            headers: {
                'Content-type': 'application/json',
            }
        }

        EgovNet.requestFetch(deleteBoardURL,
            requestOptions,
            (resp) => {
                console.log("====>>> Schdule delete= ", resp);
                if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
                    alert("게시글이 삭제되었습니다.")
                    navigate(URL.ADMIN__COMMITTEE__SCHEDULES ,{ replace: true });
                } else {
                    // alert("ERR : " + resp.message);
                    navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
                }

            }
        );
    }

    const getDateFourteenDigit = (date) => {
        return `${getYYYYMMDD(date).toString()}${makeTwoDigit(date.getHours())}${makeTwoDigit(date.getMinutes())}${makeTwoDigit(date.getSeconds())}`;
    }
    const getYYYYMMDD = (date) => {
        return date.getFullYear().toString() + makeTwoDigit(Number(date.getMonth() + 1)) + makeTwoDigit(date.getDate());
    }
    const makeTwoDigit = (number) => {
        return number < 10 ? "0" + number : number.toString();
    }

    
	const Location = React.memo(function Location() {
        return (
            <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>
        )
    });

    return (
        <div className="container">
            <div className="c_wrap">
                {/* <!-- Location --> */}
                <Location />
                {/* <!--// Location --> */}

                <div className="layout">
                    {/* <!-- Navigation --> */}
                    <EgovLeftNav></EgovLeftNav>
                    {/* <!--// Navigation --> */}

                    <div className="contents " id="contents">
                        {/* <!-- 본문 --> */}
                        <StyledDiv>
                            <div className="top_tit">
                                <h1 className="tit_1">팝업 추가</h1>
                            </div>                          
                            {/* <!-- 상단 입력 form --> */}
                            <div className='board_view2'>
                                <dl>
                                    <dt><label htmlFor="title">제목</label><span className="req">필수</span></dt>
                                    <dd>
                                        <input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
                                            value={popupDetail.title}
                                            onChange={(e) => setScheduleDetail({ ...popupDetail, title: e.target.value })}
                                        />
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>기간<span className="req">필수</span></dt>
                                    <dd className="datetime">
                                        <span className="line_break">
                                            <DatePicker
                                                selected={popupDetail.startDate}
                                                name="schdulBgnde"
                                                className="f_input"
                                                dateFormat="yyyy-MM-dd HH:mm"
                                                showTimeInput
                                                onChange={(date) => {
                                                    console.log("setStartDate : ", date);
                                                    setScheduleDetail({ ...popupDetail, schdulBgnde: getDateFourteenDigit(date), schdulBgndeYYYMMDD: getYYYYMMDD(date), schdulBgndeHH: date.getHours(), schdulBgndeMM: date.getMinutes(), startDate: date });
                                                    setSchdulBgndeHH(date.getHours());
                                                    setSchdulBgndeMM(date.getMinutes());
                                                }} />
                                            <input type="hidden" name="schdulBgndeHH" defaultValue={schdulBgndeHH} readOnly />
                                            <input type="hidden" name="schdulBgndeMM" defaultValue={schdulBgndeMM} readOnly />
                                            <span className="f_inn_txt">~</span>
                                        </span>
                                        <span className="line_break">
                                            <DatePicker
                                                selected={popupDetail.endDate}
                                                name="schdulEndde"
                                                className="f_input"
                                                dateFormat="yyyy-MM-dd HH:mm"
                                                showTimeInput
                                                minDate={popupDetail.startDate}
                                                onChange={(date) => {
                                                    console.log("setEndDate: ", date);
                                                    setScheduleDetail({ ...popupDetail, schdulEndde: getDateFourteenDigit(date), schdulEnddeYYYMMDD: getYYYYMMDD(date), schdulEnddeHH: date.getHours(), schdulEnddeMM: date.getMinutes(), endDate: date });
                                                    setSchdulEnddeHH(date.getHours());
                                                    setSchdulEnddeMM(date.getMinutes());
                                                }
                                                } />
                                            <input type="hidden" name="schdulEnddeHH" defaultValue={schdulEnddeHH} readOnly />
                                            <input type="hidden" name="schdulEnddeMM" defaultValue={schdulEnddeMM} readOnly />
                                        </span>
                                    </dd>
                                </dl>
                                <EgovAttachFile
                                fnChangeFile={(attachfile) => {
                                    console.log("====>>> Changed attachfile file = ", attachfile);
                                    const arrayConcat = { ...popupDetail}; // 기존 단일 파일 업로드에서 다중파일 객체 추가로 변환(아래 for문으로)
									for ( let i = 0; i < attachfile.length; i++) {
										arrayConcat[`file_${i}`] = attachfile[i];
									}
                                    setScheduleDetail(arrayConcat);
                                }}
                                fnDeleteFile={(deletedFile) => {
                                    console.log("====>>> Delete deletedFile = ", deletedFile);
                                    setBoardAttachFiles(deletedFile);
                                }}
                                boardFiles={boardAttachFiles}
                                mode={props.mode} />
                            </div>
                            {/* <!--// 상단 입력 form --> */}

                            {/* <!-- 게시판 --> */}
                            <RichTextEditor item={text} setText={setText}/>
                            {/* <!--// 게시판 --> */}

                            {/* <!-- 버튼영역 --> */}
                            <div className="board_btn_area">
                                <div className="left_col btn1">
                                    <button className="btn btn_skyblue_h46 w_100"
                                        onClick={() => createPopup()}
                                    > 저장</button>
                                    {modeInfo.mode === CODE.MODE_MODIFY &&
                                        <button className="btn btn_skyblue_h46 w_100"
                                        onClick={(e) => {
                                            onClickDeleteSchedule(location.state?.schdulId);
                                        }}>삭제</button> 
                                    }                                    
                                </div>
                                <div className="right_col btn1">
                                    <Link to={URL.ADMIN__CONTENTS__POP_UP} className="btn btn_blue_h46 w_100">목록</Link>
                                </div>
                            </div>
                            {/* <!--// 버튼영역 --> */}

                        </StyledDiv>                        
                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
        </div>
    );
}


export default PopupWriter;