import React, {useEffect, useState} from "react";
import {Button, Modal, Nav} from "react-bootstrap";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import * as EgovNet from "api/egovFetch";


function DownloadModal({closeFn}){
    const [tab, setTab] = useState(10);
    const [subTabsVisible, setSubTabsVisible] = useState(false);
    const [listData, setListData] = useState([]);

    useEffect(() => {
        EgovNet.requestFetch('/standardCode/standard-code-download-list?listCode='+tab,
            {
                method: "GET",
                headers: {
                    'Content-type': 'application/json',
                }
            },
            (resp) => {
                setListData(resp.result.resultList);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
    }, [tab]);

    return(
        <>
            <Modal.Header closeButton>
                <Modal.Title id="example-modal-sizes-title-lg">통합다운로드</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Row className={"justify-content-start py-1 mx-1"}>
                    <Col xs={"auto px-1"}>
                        <div className={`tab ${tab === 10 ? 'active' : ''}`}
                                          onClick={() => {setTab(10); setSubTabsVisible(false)}}>설계기준</div>
                    </Col>
                    <Col xs={"auto px-1"}>
                        <div className={`tab ${tab === 20 ? 'active' : ''}`}
                             onClick={() => {setTab(20); setSubTabsVisible(false)}}>표준시방서</div>
                    </Col>
                    <Col xs={"auto px-1"}>
                        <div className={`tab ${[40, 50, 60, 70, 80, 90].includes(tab) ? 'active' : ''}`}
                             onClick={() => {setTab(40); setSubTabsVisible(true)}}>전문시방서</div>
                    </Col>
                </Row>
                {subTabsVisible && (
                    <Nav className={"tabs"} variant={"tabs"} >
                        <Nav.Item><Nav.Link className={`${tab === 40 ? 'active' : ''}`} onClick={() => {setTab(40)}}>서울특별시</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link className={`${tab === 50 ? 'active' : ''}`} onClick={() => {setTab(50)}}>고속도로공사</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link className={`${tab === 60 ? 'active' : ''}`} onClick={() => {setTab(60)}}>한국농어촌공사</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link className={`${tab === 70 ? 'active' : ''}`} onClick={() => {setTab(70)}}>철도건설공사</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link className={`${tab === 80 ? 'active' : ''}`} onClick={() => {setTab(80)}}>LH한국토지주택공사</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link className={`${tab === 90 ? 'active' : ''}`} onClick={() => {setTab(90)}}>K-Water</Nav.Link></Nav.Item>
                    </Nav>
                )}
                <div className="board_list standard_code_modal download_list">
                    <div className="head">
                        <span>구분</span>
                        <span>코드</span>
                        <span>다운로드</span>
                    </div>
                    <div className={"result"}>
                        {listData.filter(item => {
                            return item;
                        }).map(item => {
                            return (
                                <div className="list_item">
                                    <div className="mainCategory">{item.groupNm}</div>
                                    <div className="middleCategory">{item.groupCurCd}</div>
                                    <div className="kcscCd">
                                        <Button size={"sm"} variant={"outline-secondary"}>다운로드</Button>
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </Modal.Body>
            <Modal.Footer><Button onClick={closeFn}>닫기</Button></Modal.Footer>
        </>
    )
}

export default DownloadModal;