/* eslint-disable jsx-a11y/heading-has-content */
import React, { useState, useEffect, useCallback } from 'react';
import { Link, useLocation } from 'react-router-dom';

import styled from "styled-components";
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';


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

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

const StyledDiv = styled.div`
    .calendar_list table {
        thead tr th {   
            height: auto;
            line-height: 35px;
            text-align: left;
        }
        tbody td {
            padding: 0px 5px;
            text-align: left;
            font-size: 12px;
            .day {
                display: inline-block;
                font-size: 14px;
                padding-bottom: 7px;
            }
            .title {
                &:link {
                    color: #647ea3;
                }
                &:visited {
                    color: #647ea3;
                }
                &::hover {
                    color: #345ef3;
                }
                &::active {
                    color: #345ef3;
                }
                
            }
        }
    }
`;

function Schedules(props) {

    console.group("EgovAdminScheduleList");
    console.log("[Start] EgovAdminScheduleList ------------------------------");
    console.log("EgovAdminScheduleList [props] : ", props);
    
    const location = useLocation();
    console.log("EgovAdminScheduleList [location] : ", location);

    const DATE = new Date();
    const TODAY = new Date(DATE.getFullYear(), DATE.getMonth(), DATE.getDate());
    //const TODAY = new Date(2023, 2, DATE.getDate());

    const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || { schdulSe: '', year: TODAY.getFullYear(), month: TODAY.getMonth(), date: TODAY.getDate() });
    const [calendarTag, setCalendarTag] = useState([]);

    const [scheduleList, setScheduleList] = useState();

    const innerConsole = (...args) => {
        console.log(...args);
    }

    const getLastDateOfMonth = (year, month) => {
        const LAST_DATE_SUPPLMENT = 1;
        return new Date(year, month + LAST_DATE_SUPPLMENT, 0);
    }
    const getFirstDateOfMonth = (year, month) => {
        return new Date(year, month, 1);
    }

    const changeDate = (target, amount) => {
        let changedDate;

        if (target === CODE.DATE_YEAR) {
            changedDate = new Date(searchCondition.year + amount, searchCondition.month, searchCondition.date);
        }

        if (target === CODE.DATE_MONTH) {
            changedDate = new Date(searchCondition.year, searchCondition.month + amount, searchCondition.date);
        }
        setSearchCondition({ ...searchCondition, year: changedDate.getFullYear(), month: changedDate.getMonth(), date: changedDate.getDate() });
    }

    const retrieveList = useCallback((srchcnd) => {
        console.groupCollapsed("EgovAdminScheduleList.retrieveList()");

        const retrieveListURL = '/schedule/month'+EgovNet.getQueryString(srchcnd);
        
        const requestOptions = {
            method: "GET",
            headers: {
                'Content-type': 'application/json',
            }
        }

        EgovNet.requestFetch(retrieveListURL,
            requestOptions,
            (resp) => {
                setScheduleList(resp.result.resultList);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
        console.groupEnd("EgovAdminScheduleList.retrieveList()");
    },[]);

    const drawCalendar = () => {
        console.groupCollapsed("EgovAdminScheduleList.drawCalendar()");
        const PREV_MONTH_ADDITION = -1;

        let lastOfLastMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month + PREV_MONTH_ADDITION);
        let firstOfThisMonth = getFirstDateOfMonth(searchCondition.year, searchCondition.month);
        let lastOfThisMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month);

        console.log("lastOfLastMonth : ", lastOfLastMonth, lastOfLastMonth.getDay());
        console.log("firstOfThisMonth :", firstOfThisMonth, firstOfThisMonth.getDay());
        console.log("lastOfThisMonth :", lastOfThisMonth, lastOfThisMonth.getDay());
        console.log("scheduleList : ", scheduleList);

        let firstDayOfThisMonth = firstOfThisMonth.getDay();
        let lastDateOfThisMonth = lastOfThisMonth.getDate();
        console.log("firstDayOfThisMonth", firstDayOfThisMonth, "lastDateOfThisMonth", lastDateOfThisMonth)

        let monthArr = [];
        let weekArr = [];

        // firstWeek Date Set START
        let firstWeekDateCount = 0;
        for (let day = 0; day < 7; day++) {
            if (day < firstDayOfThisMonth) { // 
                weekArr.push(0);
                firstWeekDateCount = 0;
            } else {
                weekArr.push(++firstWeekDateCount);
            }
        }
        monthArr.push(weekArr);
        console.log("FirstWeek monthArr : ", monthArr);
        // firstWeek Date Set END

        // otherWeek Date Set START
        let dayCount = 0;
        weekArr = [];//초기화
        for (let day = firstWeekDateCount + 1; day <= lastDateOfThisMonth; day++) {

            if (dayCount % 7 !== 6) {
                weekArr.push(day);
            } else {
                weekArr.push(day);
                monthArr.push(weekArr);
                weekArr = [];
                dayCount = -1;
            }
            dayCount++;
        }
        // otherWeek Date Set END

        // lastWeek Date Set START
        if (weekArr.length > 0) {//남은 부분
            for (let day = weekArr.length; day < 7; day++) {
                weekArr.push(0);
            }
            monthArr.push(weekArr);
        }
        // lastWeek Date Set END
        console.log("OtherWeek monthArr : ", monthArr);

        let mutsUseYearMonth = searchCondition.year.toString() + ((searchCondition.month + 1).toString().length === 1 ? "0" + (searchCondition.month + 1).toString() : (searchCondition.month + 1).toString());
        console.log("mutsUseYearMonth : ", mutsUseYearMonth);

        let mutCalendarTagList = [];
        let keyIdx = 0;
        
        //draw Calendar
        monthArr.forEach((week, weekIdx) => {
            console.log();
            mutCalendarTagList.push(
                <tr key={keyIdx++}>{
                    week.map((day, dayIdx) => {
                        if (day !== 0) {//당월 일별 구현
                            let sDate = day.toString().length === 1 ? "0" + day.toString() : day.toString();
                            let iUseDate = Number(mutsUseYearMonth + sDate);                            
                            if (scheduleList && scheduleList.length > 0) {//일정 있는 경우
                                return (
                                    <td key={keyIdx++}>
                                        <Link to={{pathname: URL.ADMIN__COMMITTEE__SCHEDULES__CREATE}} state={{ iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
                                                key={keyIdx++}>{day}</Link><br/>
                                        {
                                            scheduleList.map((schedule, scheduleIdx) => {
                                                let test = schedule.evt_start_dt.replace('-','');
                                                console.log( test );
                                                let iBeginDate = Number(schedule.evt_start_dt.substring(0, 8));
                                                let iEndDate = Number(schedule.evt_end_dt.substring(0, 8));
                                                innerConsole("scheduleList ", day, scheduleIdx, iBeginDate, iUseDate, iEndDate, iUseDate >= iBeginDate && iUseDate <= iEndDate);
                                                innerConsole("schedule.schdulId ", schedule.schdulId);
                                                if (iUseDate >= iBeginDate && iUseDate <= iEndDate) {
                                                    return (
                                                        <>
                                                            <Link to={{pathname: URL.ADMIN__COMMITTEE__SCHEDULES__DETAIL}}
                                                                className="title" 
                                                                state={{schdulId: schedule.schdulId}}
                                                                key={keyIdx++}>{schedule.schdulNm}
                                                            </Link>
                                                            <br/>
                                                        </>
                                                    );
                                                } else return <></>
                                            })
                                        }
                                    </td>
                                );
                            } else {//일정 없는 경우
                                return (
                                    <td key={keyIdx++}>
                                        <Link to={{pathname: URL.ADMIN__COMMITTEE__SCHEDULES__CREATE}} state={{iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
                                                key={keyIdx++}>{day}</Link><br/>
                                    </td>);
                            }
                        } else if (day === 0) {// 이전 달/다음 달 구현
                            return (<td key={keyIdx++}></td>);
                        } else return <></>
                    })
                }</tr>);
        })
        console.log("mutCalendarTagList : ", mutCalendarTagList);
        setCalendarTag(mutCalendarTagList);
        console.groupEnd("EgovAdminScheduleList.drawCalendar()");
    }

    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>
        )
    });

    useEffect(() => {
        retrieveList(searchCondition);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [searchCondition]);

    useEffect(() => {
        drawCalendar();
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [scheduleList]);

    console.log("------------------------------EgovAdminScheduleList [End]");
    console.groupEnd("EgovAdminScheduleList");

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

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

                    <div className="contents " id="contents">
                        {/* <!-- 본문 --> */}
                        <div className="top_tit">
                            <h1 className="tit_1">위원회 일정 관리</h1>
                        </div>

                        <StyledDiv>
                            <h2 className="tit_2"></h2>
                            {/* <!-- 검색조건 --> */}
                            <div className="condition">
                                <ul>
                                    {false &&
                                    <li>
                                        <label className="f_select" htmlFor="sel1">
                                            <select name="schdulSe" id="sel1" title="조건"
                                                onChange={e => {
                                                    setSearchCondition({ ...searchCondition, schdulSe: e.target.value });
                                                }}
                                            >
                                                <option value="">전체</option>
                                                <option value="1">회의</option>
                                                <option value="2">세미나</option>
                                                <option value="3">강의</option>
                                                <option value="4">교육</option>
                                                <option value="5">기타</option>
                                            </select>
                                        </label>
                                    </li>
                                    }
                                    
                                    <li className="half L">
                                        <button className="prev"
                                            onClick={() => {
                                                changeDate(CODE.DATE_YEAR, -1);
                                            }}
                                        ></button>
                                        <span>{searchCondition.year}</span>
                                        <button className="next"
                                            onClick={() => {
                                                changeDate(CODE.DATE_YEAR, 1);
                                            }}
                                        ></button>
                                    </li>
                                    <li className="half R">
                                        <button className="prev"
                                            onClick={() => {
                                                changeDate(CODE.DATE_MONTH, -1);
                                            }}
                                        ></button>
                                        <span>{(searchCondition.month + 1)}</span>
                                        <button className="next"
                                            onClick={() => {
                                                changeDate(CODE.DATE_MONTH, 1);
                                            }}
                                        ></button>
                                    </li>
                                </ul>
                            </div>
                            {/* <!--// 검색조건 --> */}

                            <div className="calendar_list">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>일</th>
                                            <th>월</th>
                                            <th>화</th>
                                            <th>수</th>
                                            <th>목</th>
                                            <th>금</th>
                                            <th>토</th>
                                        </tr>
                                    </thead>                                    
                                        {
                                            typeof scheduleList === 'undefined'
                                        ?
                                            <tbody>
                                                <tr>
                                                    <td colSpan="7">
                                                        <Box sx={{ display: 'flex', width: '100%', padding: '250px 0px' }}>
                                                            <CircularProgress sx={{ margin: '0px auto', }}/>
                                                        </Box>
                                                    </td>
                                                </tr>                                                
                                            </tbody>
                                        :
                                            <tbody>
                                                {calendarTag}
                                            </tbody>
                                        }
                                </table>
                            </div>
                        </StyledDiv>                        
                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Schedules;