import React, {useState, useEffect, useCallback, useRef} from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import CountUp from 'react-countup';

import { Box, Tabs, Tab, Typography } from '@mui/material';

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

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

import EgovLogin from "../main/EgovLogin";
import {parseJwt} from "../../utils/parseJwt";
import {getLocalItem, setLocalItem} from "utils/storage";
import CODE from "../../constants/code";


function a11yProps(index) {
    return {
        id: `wrapped-tab-${index}`,
        'aria-controls': `wrapped-tabpanel-${index}`,
    };
}

function EgovMain(props) {
    console.group("EgovMain");
    console.log("[Start] EgovMain ------------------------------");
    console.log("EgovMain [props] : ", props);

    const location = useLocation();
    const navigate = useNavigate();
    console.log("EgovMain [location] : ", location);

    const [user, setUser] = useState(parseJwt(getLocalItem('accessToken')) || null);
    console.log(user);

    const handlePlusClick = () => {
        const urls = [
            URL.SUPPORT_LIST_NOCODE+'/KCSC-NTC',
            URL.COMMITTEE_PROGRESS,
            URL.SUPPORT_LIST_NOCODE+'/KCSC-NOT',
            URL.SUPPORT_RESEARCH,
            URL.SUPPORT_LIST_NOCODE+'/KCSC-TEC',
            URL.SUPPORT_LIST_NOCODE+'/KCSC-NWS'
        ];
        if (value >= 0 && value < urls.length) {
            navigate(urls[value]);
        }
    };

    const settings = {
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 6,
        slidesToScroll: 1,
        arrows: false,
        autoplay: true,
        autoplaySpeed: 3000,
        pauseOnHover: true
    };

    const banners = [
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/copy2.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/copy2.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/copy2.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/copy2.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' },
        // 필요한 만큼 배너 이미지를 추가합니다.
    ];

    // TAB 상태를 정의합니다.
    const [value, setValue] = useState(0);
    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

	// eslint-disable-next-line no-unused-vars
    // const [noticeBoard, setNoticeBoard] = useState();
	// // eslint-disable-next-line no-unused-vars
    // const [gallaryBoard, setGallaryBoard] = useState();
    // const [noticeListTag, setNoticeListTag] = useState();
    // const [gallaryListTag, setGallaryListTag] = useState();
    //
    // const retrieveList = useCallback(() => {
    //     console.groupCollapsed("EgovMain.retrieveList()");
    //
    //
    //     const retrieveListURL = '/';
    //     const requestOptions = {
    //         method: "POST",
    //
    //         headers: {
    //             'Content-type': 'application/json'
    //         },
    //         body: JSON.stringify()
    //     }
    //
    //     EgovNet.requestFetch(retrieveListURL,
    //         requestOptions,
    //         (resp) => {
    //
    //             setNoticeBoard(resp.result.notiList);
    //             setGallaryBoard(resp.result.galList);
    //
    //             let mutNotiListTag = [];
    //             mutNotiListTag.push(<li key="0">검색된 결과가 없습니다.</li>); // 게시판 목록 초기값
    //
    //             // 리스트 항목 구성
    //             resp.result.notiList.forEach(function (item, index) {
    //                 if (index === 0) mutNotiListTag = []; // 목록 초기화
    //                 mutNotiListTag.push(
    //                     <li key={item.nttId}>
    //                         <Link
    //                             to={{pathname: URL.INFORM_NOTICE_DETAIL}}
    //                             state={{
    //                                 nttId: item.nttId,
    //                                 bbsId: item.bbsId
    //                             }}
    //                         >
    //                             {item.nttSj}
    //                             <span>{item.frstRegisterPnttm}</span>
    //                         </Link>
    //                     </li>
    //                 );
    //             });
    //             setNoticeListTag(mutNotiListTag);
    //
    //             let mutGallaryListTag = [];
    //             mutGallaryListTag.push(<li key="0">검색된 결과가 없습니다.</li>); // 게시판 목록 초기값
    //
    //             // 리스트 항목 구성
    //             resp.result.galList.forEach(function (item, index) {
    //                 if (index === 0) mutGallaryListTag = []; // 목록 초기화
    //                 mutGallaryListTag.push(
    //                     <li key={index}>
    //                         <Link
    //                             to={{pathname: URL.INFORM_GALLERY_DETAIL}}
    //                             state={{
    //                                 nttId: item.nttId,
    //                                 bbsId: item.bbsId
    //                             }}
    //                         >
    //                             {item.nttSj}
    //                             <span>{item.frstRegisterPnttm}</span>
    //                         </Link>
    //                     </li>
    //                 );
    //             });
    //             setGallaryListTag(mutGallaryListTag);
    //         },
    //         function (resp) {
    //             console.log("err response : ", resp);
    //         }
    //     );
    //     console.groupEnd("EgovMain.retrieveList()");
    // },[]);
    //
    // useEffect(() => {
    //     retrieveList();
    // }, [retrieveList]);


    const onChangeLogin = (user) => {
        setUser(user);
        // props.onChangeLogin(user);
    }

    const logOutHandler = () => {// 로그인 정보 존재할 때
        const logOutUrl = '/auth/logout';
        const requestOptions = {
            headers: {
                'Content-type': 'application/json',
            },
            credentials: 'include',
        }
        EgovNet.requestFetch(logOutUrl, requestOptions,
            function (resp) {
                console.log("===>>> logout resp= ", resp);
                if (parseInt(resp.resultCode) === parseInt(CODE.RCV_SUCCESS)) {
                    onChangeLogin({ loginVO: {} });
                    setLocalItem('loginUser', {"id":""});
                    setLocalItem('accessToken', null);
                    setLocalItem('refreshToken', null);
                    window.alert("로그아웃되었습니다!");

                    // PC와 Mobile 열린메뉴 닫기: 2023.04.13(목) 김일국 추가
                    document.querySelector('.all_menu.WEB').classList.add('closed');
                    document.querySelector('.btnAllMenu').classList.remove('active');
                    document.querySelector('.btnAllMenu').title = '전체메뉴 닫힘';
                    document.querySelector('.all_menu.Mobile').classList.add('closed');
                    onChangeLogin(null);
                }
            }
        );
    }

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

    return (
        <div className="P_MAIN">{/* container */}
            <div className="c_wrap">
                <div className="topbox d-flex justify-content-center align-items-center">
                    <div className="topbox_1">
                        <div className="topbox_11">실시간 인기키워드</div>
                        <div className="topbox_12">현재 기준 사용자가 가장 많이 검색하는 키워드입니다.</div>
                        <div className="topbox_13">2024년 5월 9일 목요일 오전 11:45</div>
                        <Row className="topbox_14">
                            <Col xs={6}>
                                <div className={"text-truncate"}>1 가설공사</div>
                                <div className={"text-truncate"}>2 가설공사</div>
                                <div className={"text-truncate"}>3 가설공사</div>
                                <div className={"text-truncate"}>4 가설공사가설공사</div>
                                <div className={"text-truncate"}>5 가설공사</div>
                            </Col>
                            <Col xs={6}>
                                <div className={"text-truncate"}>&nbsp;&nbsp;6 가설공사</div>
                                <div className={"text-truncate"}>&nbsp;&nbsp;7 가설공사가설공사가설공사가설공사</div>
                                <div className={"text-truncate"}>&nbsp;&nbsp;8 가설공사</div>
                                <div className={"text-truncate"}>&nbsp;&nbsp;9 가설공사</div>
                                <div className={"text-truncate"}>10 가설공사</div>
                            </Col>
                        </Row>
                    </div>
                    <div className="topbox_2">
                        <div className={"topbox_11"}>자주찾는 서비스</div>
                        <div className={"topbox_12"}>버튼을 선택하시면 해당 서비스로 이동합니다.</div>
                        <Row>
                            <Col>
                                <Link to={URL.STANDARD_CODE_LIST} className="link-wrapper">
                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing1.png" /></div>
                                    <div className={"topbox_14"}>코드검색</div>
                                    <div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>
                                </Link>
                            </Col>
                            <Col>
                                <Link to={URL.STANDARD_CODE_INFO} className="link-wrapper">
                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing2.png" /></div>
                                    <div className={"topbox_14"}>코드안내</div>
                                    <div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>
                                </Link>
                            </Col>
                            <Col>
                                <Link to={URL.COMMITTEE_SCHEDULE} className="link-wrapper">
                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing3.png" /></div>
                                    <div className={"topbox_14"}>위원회일정</div>
                                    <div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>
                                </Link>
                            </Col>
                            <Col>
                                <Link to={URL.STANDARD_CODE_LIST + '/5000'} className="link-wrapper">
                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing4.png" /></div>
                                    <div className={"topbox_14"}>전문시방서</div>
                                    <div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>
                                </Link>
                            </Col>
                        </Row>
                    </div>
                    <div className="topbox_3">
                        <div className={"topbox_11"}>{user ? (
                            <>
                                <Row>
                                    <Col xs={6}>{user.id} 님.</Col>
                                    <Col xs={6} className={"text-end"}><Button type={"button"} className={"btn btn-22498E btn-sm"} onClick={logOutHandler}>로그아웃</Button> </Col>
                                </Row>
                            </>    
                        ) : ('로그인')}
                        </div>
                        <div>
                            <EgovLogin onChangeLogin={onChangeLogin}></EgovLogin>
                        </div>
                    </div>
                </div>
                <div className="menubox d-flex justify-content-center align-items-center">
                    <div className="menubox_n text-center"><Link to={URL.STANDARD_CODE_OLD}><div className="menu_img"><img src="/assets/images/ico-landing5.png" /></div><div className="menu_text">훈령/예규/지침</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.STANDARD_CODE_ENG}><div className="menu_img"><img src="/assets/images/ico-landing6.png" /></div><div className="menu_text">영문건설기준</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.STANDARD_CODE_TERM}><div className="menu_img"><img src="/assets/images/ico-landing8.png" /></div><div className="menu_text">건설기준용어</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.SUPPORT_LIST_NOCODE+'/KCSC-EVT'}><div className="menu_img"><img src="/assets/images/ico-landing7.png" /></div><div className="menu_text">주요행사</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.SUPPORT_LIST_NOCODE+'/KCSC-INV'}><div className="menu_img"><img src="/assets/images/ico-landing9.png" /></div><div className="menu_text">수요조사</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.SUPPORT_API}><div className="menu_img"><img src="/assets/images/ico-landing10.png" /></div><div className="menu_text">API 서비스</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.SUPPORT_SITE}><div className="menu_img"><img src="/assets/images/ico-landing11.png" /></div><div className="menu_text">관련사이트</div></Link></div>
                </div>
                <div className="qnabox">
                    <div className="qnabox_1 d-flex justify-content-center">
                        <div className="qnabox_11 d-flex justify-content-start align-items-end">Q&A</div>
                        <div className="qnabox_12 d-flex justify-content-end align-items-end">1/2</div>
                    </div>
                    <div className="qnabox_2 d-flex justify-content-center align-items-center">
                        <div className="qnabox_n">1</div>
                        <div className="qnabox_n">2</div>
                        <div className="qnabox_n">3</div>
                        <div className="qnabox_n">4</div>
                    </div>
                </div>
                <div className="numbox d-flex justify-content-center align-items-center">
                    <div className="numbox_n"><div className="num_text">다운로드 수</div><div className="num_count"><CountUp start={0} end={334345} duration={2.5} separator="," /><span className="unit">건</span></div></div>
                    <div className="numbox_n"><div className="num_text">회원가입자 수</div><div className="num_count"><CountUp start={0} end={12345} duration={2.5} separator="," /><span className="unit">명</span></div></div>
                    <div className="numbox_n"><div className="num_text">일 편균 방문자</div><div className="num_count"><CountUp start={0} end={56427} duration={2.5} separator="," /><span className="unit">명</span></div></div>
                    <div className="numbox_n"><div className="num_text">개정고시</div><div className="num_count"><CountUp start={0} end={99875} duration={2.5} separator="," /><span className="unit">건</span></div></div>
                </div>
                <div className="bbsbox d-flex justify-content-center align-items-start">
                    <div className="bbsbox_1">
                        <Box sx={{ borderBottom: 2, borderColor: 'divider' }}>
                            <Tabs
                                value={value}
                                onChange={handleChange}
                                indicatorColor="secondary"
                                textColor="secondary"
                            >
                                <Tab value={0} {...a11yProps(0)} sx={{ fontSize: value === 0 ? '1.5rem' : '1rem', fontWeight: 700}} label="공지사항" wrapped />
                                <Tab value={1} {...a11yProps(1)} sx={{ fontSize: value === 1 ? '1.5rem' : '1rem', fontWeight: 700}} label="위원회 진행현황" />
                                <Tab value={2} {...a11yProps(2)} sx={{ fontSize: value === 2 ? '1.5rem' : '1rem', fontWeight: 700}} label="건설기준고시" />
                                <Tab value={3} {...a11yProps(3)} sx={{ fontSize: value === 3 ? '1.5rem' : '1rem', fontWeight: 700}} label="건설기준연구" />
                                <Tab value={4} {...a11yProps(4)} sx={{ fontSize: value === 4 ? '1.5rem' : '1rem', fontWeight: 700}} label="기술자료" />
                                <Tab value={5} {...a11yProps(5)} sx={{ fontSize: value === 5 ? '1.5rem' : '1rem', fontWeight: 700}} label="보도자료" />
                                <Tab value="" label="+" sx={{ fontSize: '1.75rem', ml: 'auto' }} onClick={handlePlusClick} />
                            </Tabs>
                        </Box>
                        <TabPanel value={value} index={0}>Item 0</TabPanel>
                        <TabPanel value={value} index={1}>Item 1</TabPanel>
                        <TabPanel value={value} index={2}>Item 2</TabPanel>
                        <TabPanel value={value} index={3}>Item 3</TabPanel>
                        <TabPanel value={value} index={4}>Item 4</TabPanel>
                        <TabPanel value={value} index={5}>Item 5</TabPanel>
                    </div>
                    <div className="bbsbox_2"><Link to={URL.ABOUT_PROMOTE}><img src="/assets/images/narae.jpg" /></Link></div>
                </div>
                <div className="bannerbox">
                    <Slider {...settings}>
                        {banners.map((banner, index) => (
                            <div key={index} className="banner_slide d-flex justify-content-center align-items-center">
                                <a href={banner.url} target="_blank" rel="noopener noreferrer">
                                    <img src={banner.src} alt={`Banner ${index + 1}`} />
                                </a>
                            </div>
                        ))}
                    </Slider>
                </div>
            </div>
        </div>

    );
}


function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`wrapped-tabpanel-${index}`}
            aria-labelledby={`wrapped-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Box sx={{ p: 3 }}>
                    <Typography>{children}</Typography>
                </Box>
            )}
        </div>
    );
}

export default EgovMain;