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 ContentTitle from "../../component/ContentTitle.jsx";
import RestoreFromTrashIcon from "@mui/icons-material/RestoreFromTrash";
import Pagination from "../../component/Pagination.jsx";

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

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

  const [state, setState] = React.useState();
  const [title, setTitle] = React.useState();
  const [username, setUsername] = React.useState();
  const [datetime, setDatetime] = 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_state: state,
        qna_title: title,
        qna_insert_user_id: username,
        qna_insert_datetime: datetime,
      }),
    })
      .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 = ["idx", "state", "title", "username", "datetime"];
  const content = [
    {
      No: 1,
      answer: "답변완료",
      title: (
        <div
          className="title"
          onClick={() => {
            navigate("/QuestionConfirm");
          }}
        >
          담당자 바꿔주세요
        </div>
      ),
      writer: "홍길동",
      date: "2023-01-27",
    },
  ];

  React.useEffect(() => {

    getQnaList();

  }, [])

  return (
    <main>
      <QnAModal
        open={modalOpen}
        close={closeModal}
        header="기관 등록"
      ></QnAModal>
      <div className="content-wrap">
        <ContentTitle contentTitle={"Q&A"} />
        <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={content}
          contentKey={key}
          view={"qna"}
          offset={offset}
          limit={limit}
        />
      </div>
      <div>
        <Pagination
          total={myQnaTotal}
          limit={limit}
          page={page}
          setPage={setPage}
        />
      </div>
    </main>
  );
}