import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import Switch from '@mui/material/Switch';

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

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

import styled from "styled-components";

const StyledDiv = styled.div`
    .board_btn_area {
        margin: 12px 0px;
    }
`;

const label = { inputProps: { 'aria-label': '사용여부' } };

function PopUp(props) {
    
    const location = useLocation();

    const [listPopup, setListPopup] = useState([]);
    const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || { pageIndex: 1, searchCnd: '0', searchWrd: '' });
    const [paginationInfo, setPaginationInfo] = useState({});

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

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

    const getList = (searchCondition) => {  
        
        EgovNet.requestFetch(`/contents/api/popup-manage/list?page=${searchCondition.pageIndex-1}&size=10&sort=popupSeq,desc`,
            requestOptions,
            function (resp) {
                console.log('%o', resp);
                setListPopup(resp.result.listPopup);
                setPaginationInfo({...resp.result.paginationInfo});
            }
        );
        
    }

    
	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>

                            {/* <!-- 버튼영역 --> */}
                            <div className="board_btn_area">
                                <div className="right_col btn1">
                                    <Link to={URL.ADMIN__COMMITTEE__SCHEDULES} className="btn btn_blue_h46 w_100">팝업 추가</Link>
                                </div>
                            </div>
                            {/* <!--// 버튼영역 --> */}
                    
                            {/* <!-- 게시판목록 --> */}
                            <div className="board_list BRD008">
                                <div className="head">
                                    <span>번호</span>
                                    <span>제목</span>
                                    <span>기간</span>
                                    <span>사용여부</span>
                                </div>
                                <div className="result">                                    
                                    {/* <!-- case : 데이터 없을때 --> */}
                                    {listPopup.length === 0 &&
                                        <p className="no_data" key="0">검색된 결과가 없습니다.</p>
                                    }                                    
                                    {listPopup.map((it)=>(
                                        <div className='list_item'>
                                            <div>{it.seq}</div>
                                            <div className="al"><Link to={URL.SUPPORT_QNA_DETAIL}>{it.popupTitle}</Link></div>
                                            <div>{it.startDate} ~ {it.endDate}</div>
                                            <div>{it.useYn === 'Y' ? <Switch {...label} defaultChecked /> : <Switch {...label} />}</div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            {/* <!--// 게시판목록 --> */}

                            <div className="board_bot">
                                {/* <!-- Paging --> */}
                                <EgovPagingPaginationInfo pagination={paginationInfo} setPaginationInfo={setPaginationInfo} moveToPage={passedPage => {
                                    getList({ ...searchCondition, pageIndex: passedPage })
                                }} />
                                {/* <!--/ Paging --> */}
                            </div>
                        </StyledDiv>                        
                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
        </div>
    );
}


export default PopUp;