import React, { useState } from 'react';
import {Link, useLocation, useNavigate} from 'react-router-dom';
import * as EgovNet from 'api/egovFetch';

import URL from "constants/url";
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

function API(){
    const [show, setShow] = useState(false);
    const [modalContent, setModalContent] = useState({});
    const handleClose = () => setShow(false);

    const goToCreate = () => {
        // 모달창 띄우기
        setModalContent();
        setShow(true);
    };

    return (
        <div className="container">
            <div className="c_wrap">
                {/* <!-- Location --> */}
                <div className="location">
                    <ul>
                        <li><Link to={URL.MAIN} className="home" >Home</Link></li>
                        <li><Link to={URL.SUPPORT_LIST_NOCODE+'/KCSC-NTC'}>정보제공</Link></li>
                        <li>API 서비스</li>
                    </ul>
                </div>
                {/* <!--// Location --> */}

                <div className="layout">

                    <div className="contents" id="contents">
                        {/* <!-- 본문 --> */}
                        <h1 className="tit_3">API 서비스</h1>

                        <Row className={"pb-2 justify-content-between"} >
                            <Col className={"f_17 text-4c6 pt-3"}>1. API 기본정보</Col>
                            <Col className={"text-end"}><Button type={"button"} className={"btn btn-22498E px-4"}  onClick={goToCreate} >인증키 발급신청</Button></Col>
                        </Row>

                        <div className="board_list BRD016">
                            <div className="head">
                                <span>Method</span>
                                <span>Request URL</span>
                                <span>형식</span>
                            </div>
                            <div className="result">
                                <div className="list_item">
                                    <div>GET</div>
                                    <div>https://kcsc.re.kr/OpenApi/CodeViewer</div>
                                    <div>JSON</div>
                                </div>
                                <div className="list_item">
                                    <div>GET</div>
                                    <div>https://kcsc.re.kr/OpenApi/CodeList</div>
                                    <div>JSON</div>
                                </div>
                            </div>
                        </div>

                        <Row className={"py-2"} >
                            <Col className={"f_17 text-4c6 pt-3"}>2. 요청 변수</Col>
                        </Row>

                        <div className="board_list BRD017">
                            <div className="head">
                                <span>요청 변수명</span>
                                <span>설명</span>
                                <span>예시</span>
                                <span>Type</span>
                                <span>필수 여부</span>
                            </div>
                            <div className="result">
                                <div className="list_item">
                                    <div>Type</div>
                                    <div>문서 타입</div>
                                    <div>KDS</div>
                                    <div>string</div>
                                    <div>Y</div>
                                </div>
                                <div className="list_item">
                                    <div>Code</div>
                                    <div>문서 번호</div>
                                    <div>101000</div>
                                    <div>string</div>
                                    <div>Y</div>
                                </div>
                                <div className="list_item">
                                    <div>Key</div>
                                    <div>인증키</div>
                                    <div>bdf239cd309cc876293ff3</div>
                                    <div>string</div>
                                    <div>Y</div>
                                </div>
                            </div>
                        </div>

                        <Row className={"py-2"} >
                            <Col className={"f_17 text-4c6 pt-3"}>3. 출력 결과</Col>
                        </Row>

                        <div className="board_list BRD016">
                            <div className="head">
                                <span>필드</span>
                                <span>설명</span>
                                <span>Type</span>
                            </div>
                            <div className="result">
                                <div className="list_item">
                                    <div>No</div>
                                    <div>코드 고유번호입니다.</div>
                                    <div>int</div>
                                </div>
                                <div className="list_item">
                                    <div>CodeType</div>
                                    <div>코드 타입입니다.</div>
                                    <div>string</div>
                                </div>
                                <div className="list_item">
                                    <div>Code</div>
                                    <div>코드 번호입니다.</div>
                                    <div>string</div>
                                </div>
                                <div className="list_item">
                                    <div>FullCode</div>
                                    <div>카테고리 타입이 있는 코드 번호입니다.</div>
                                    <div>string</div>
                                </div>
                                <div className="list_item">
                                    <div>Name</div>
                                    <div>코드 이름입니다.</div>
                                    <div>string</div>
                                </div>
                                <div className="list_item">
                                    <div>Version</div>
                                    <div>코드 버전입니다.</div>
                                    <div>string</div>
                                </div>
                                <div className="list_item">
                                    <div>UpdateDate</div>
                                    <div>코드 수정일자입니다.</div>
                                    <div>datetime</div>
                                </div>
                                <div className="list_item">
                                    <div>Sort</div>
                                    <div>목차 정렬 순서 번호입니다.</div>
                                    <div>int</div>
                                </div>
                                <div className="list_item">
                                    <div>Title</div>
                                    <div>목차 입니다.</div>
                                    <div>string</div>
                                </div>
                                <div className="list_item">
                                    <div>Contents</div>
                                    <div>목차의 상세내용입니다.</div>
                                    <div>string</div>
                                </div>
                                <div className="list_item">
                                    <div>List</div>
                                    <div>특정코드 상세내용 리스트입니다.</div>
                                    <div>list</div>
                                </div>
                                <div className="list_item">
                                    <div>ListParentCodes</div>
                                    <div>카테고리 속성 리스트입니다.</div>
                                    <div>list</div>
                                </div>
                                <div className="list_item">
                                    <div>Message</div>
                                    <div>에러 내용입니다.</div>
                                    <div>string</div>
                                </div>
                            </div>
                        </div>

                        <Row className={"py-2"} >
                            <Col className={"f_17 text-4c6 pt-3"}>4. 예시</Col>
                        </Row>

                        <div className="board_list BRD018">
                            <div className="head">
                                <span>Request</span>
                                <span>https://kcsc.re.kr/OpenApi/CodeViewer/KCS/114010?key=bdf239cd309cc876293ff3</span>
                            </div>
                            <div className="result">
                                <div className="list_item">
                                    <div>Response</div>
                                    <div>
                                        No : 30155<br />
                                        CodeType : KCS<br />
                                        Code : 114010<br />
                                        FullCode : 2010114010<br />
                                        Name : 파형강판 암거<br />
                                        Version : 2019<br />
                                        UpdateDate : {`{2019-06-27 오전 10:52:07}`}<br />
                                        List : {`[{"No": 30155, "Sort": 4, "Title": "1.1 적용범위", "Contents": "<ρ>(1) 이 기준은 구조용 파형강판을 이용하여 통로암거, 수로암거, 소교량 및 가설 구조물 등의 파형강판 암거.."}, ...]`}<br />
                                        ListParentCodes : null<br />
                                        Message : null'
                                    </div>
                                </div>
                            </div>
                            <div className="head">
                                <span>Request</span>
                                <span>https://kcsc.re.kr/OpenApi/CodeList?key=bdf239cd309cc876293ff3</span>
                            </div>
                            <div className="result">
                                <div className="list_item">
                                    <div>Response</div>
                                    <div>
                                        {`[{No : 20256`}<br />
                                        CodeType : KDS<br />
                                        Code : 100000<br />
                                        FullCode : 10101000<br />
                                        Name : 공통설계기준<br />
                                        Version : 2018<br />
                                        UpdateDate : {`{2019-06-04 오전 10:52:07}`}<br />
                                        List : null<br />
                                        ListParentCodes : {`{"codeType":"KDS","fullCode":"10","name":"설계기준"},{"codeType":"KDS","fullCode":"1010","name":"공통편"},{"codeType":"KDS","fullCode":"101010","name":"공통 설계기준"}`}<br />
                                        Message : {`null}, ...]`}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>API 서비스 신청</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h6 className={"text-224"}>아이디 : ***1234</h6>
                    <div className={"py-3"}><Button type={"button"} className={"btn btn-22498E px-4 w-100"}  onClick={""} >발급신청</Button></div>
                    <div className={"f_14 text-center"}>발급신청 완료 후 관리자 승인절차에 따라 발급됩니다.</div>
                </Modal.Body>
            </Modal>
        </div>
    );
}

export default API;