import React from "react";
import Button from "../../component/Button.jsx";
import Table from "../../component/Table.jsx";
import QnAModal from "../../component/QnAModal.jsx";
import { useNavigate } from "react-router";
import Pagination from "../../component/Pagination.jsx";
import { Link } from "react-router-dom";


export default function QuestionSelect() {
  const navigate = useNavigate();
  const [modalOpen, setModalOpen] = React.useState(false);
  const openModal = () => {
    setModalOpen(true);
  };
  const closeModal = (isInsertComplete) => {
    setModalOpen(false);
    if (isInsertComplete == true) {
      getQnaList();
    }
  };

  const [qnaList, setQnaList] = React.useState([]);

  const [idx, setIdx] = React.useState();
  const [state, setState] = React.useState();
  const [qnause, setQnaUse] = React.useState();



  //-------- 페이징 작업 설정 시작 --------//
  const limit = 15; // 페이지당 보여줄 공지 개수
  const [page, setPage] = React.useState(1); //page index
  const offset = (page - 1) * limit; //게시물 위치 계산
  const [myQnaTotal, setMyQnaTotal] = React.useState(0); //최대길이 넣을 변수

  //qna 조회
  const getQnaList = () => {
    fetch("/qna/qnaSelectList.json", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=UTF-8;",
      },
      body: JSON.stringify({
        qna_idx: idx,
        qna_state: state,
        qna_use: qnause,
      }),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        setQnaList(data);
        setMyQnaTotal(data.length);
      })
      .catch((error) => {
        console.log("qna error : ", error);
      });
  };

  
  //게시판
  const thead = ["No", "답변상태", "제목", "작성자", "작성일자"];
  const key = [
    "qna_idx",
    "qna_state",
    "qna_title",
    "qna_insert_user_name",
    "qna_insert_datetime",
  ];

  React.useEffect(() => {
    getQnaList();
  }, []);

  return (
    <main>
        <QnAModal
          open={modalOpen}
          close={closeModal}
          header="기관 등록"
        ></QnAModal>
      <div className="content-wrap">
        <div className="board-wrap">
          <div className="btn-wrap flex-end margin-bottom question-select">
            <input type="checkbox" />
            <label htmlFor="">내 Q&A 보기</label>
            <select name="" id="">
              <option value="답변상태">답변상태</option>
              <option value="미답변">미답변</option>
              <option value="답변완료">답변완료</option>
            </select>
              <Button
              className={"btn-small gray-btn"}
              btnName={"작성하기"}
              onClick={openModal}
            />
          </div>
        </div>
        <Table
          className="equipment-detail"
          head={thead}
          contents={qnaList}
          contentKey={key}
          view={"qna"}
          offset={offset}
          limit={limit}
        />
        <div className="margin-bottom">
          <Pagination
            total={myQnaTotal}
            limit={limit}
            page={page}
            setPage={setPage}
          />
        </div>
      </div>
    </main>
  );
}