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

import * as EgovNet from 'api/egovFetch';
import URL from 'constants/url';
import CODE from 'constants/code';
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";

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


import styled from "styled-components";

const StyledDiv = styled.div`
    .BRD008 {
        .head {
            span:nth-child(3) {
                width: 200px;
            }
            span:nth-child(4) {
                width: 200px;
            }
        }
        .result .list_item {
            & > div {
                &:nth-child(3) {
                    width: 200px;
                }
                &:nth-child(4) {
                    width: 200px;
                }
            }

            .title {
                color: #001574;
            }
        }


    }

    .board-bot {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        justify-content: center;
        
        & > *:nth-child(1) {            
            width: 16%;
            justify-content: left;
        }
        & > *:nth-child(2) {
            width: 68%;
            justify-content: center;
        }
        & > *:nth-child(3) {
            width: 16%;
            justify-content: right;
        }
    }
`;

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

function StandardResearch(props) {

    const location = useLocation();
    const navigate = useNavigate();

    const [list, setList] = 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/standard-research/list?page=${searchCondition.pageIndex-1}&size=10&sort=rsSeq,desc`,
            requestOptions,
            function (resp) {
                console.log('%o', resp);
                setList(resp.result.list);
                setPaginationInfo({...resp.result.paginationInfo});
            }
        );
        
    }


    const onChangeActivationSwitch = (e, rsId) => {
        const checked = e.target.checked;
        const requestURL = `/contents/api/popup-manage/activation-switch/${rsId}?checked=${checked}`;

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

        EgovNet.requestFetch(requestURL,
            requestOptions,
            (resp) => {
                console.log("====>>> Schdule delete= ", resp);
                if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
                    navigate(URL.ADMIN__CONTENTS__POP_UP ,{ replace: true });
                } else {
                    navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
                }

            }
        );
    }

    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_list BRD005">
                                <div className="head">
                                    <span>번호</span>
                                    <span>연구명</span>
                                    <span>연구기간</span>
                                    <span>연구책임자</span>
                                </div>
                                <div className="result">                                    
                                    {/* <!-- case : 데이터 없을때 --> */}
                                    {typeof list === 'undefined' &&
                                        <p className="no_data" key="0"><LinearProgress /></p>
                                    } 
                                    {list && list.length === 0 &&
                                        <p className="no_data" key="0">검색된 결과가 없습니다.</p>
                                    }                                    
                                    {list && list.map((it)=>(
                                        <div className='list_item' key={it.id}>
                                            <div>{it.number}</div>
                                            <div className="al"><Link to={URL.ADMIN__CONTENTS__STANDARDS_RESEARCH__MODIFY} state={{rsId: it.id} } key={it.id} className='title' className={"text-222"}>{it.title}</Link></div>
                                            <div>{it.researchStartDate} ~ {it.researchEndDate}</div>
                                            <div>{it.director}</div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            {/* <!--// 게시판목록 --> */}





                            {/* <!-- Paging --> */}
                            <Row className="pt-3">
                                <Col xs={3}></Col>
                                <Col xs={6}><EgovPagingPaginationInfo pagination={paginationInfo} setPaginationInfo={setPaginationInfo} moveToPage={passedPage => {
                                        getList({ ...searchCondition, pageIndex: passedPage })
                                    }} />
                                </Col>
                                <Col xs={3} className="text-end">
                                    <Link to={URL.ADMIN__CONTENTS__STANDARDS_RESEARCH__CREATE} className="btn btn_blue_h32 w_100">등록</Link>
                                </Col>
                                
                            </Row>
                            {/* <!--/ Paging --> */}


                          


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

export default StandardResearch;