import React, {useState } 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';


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

  const [state, setState] = useState();
  const [title, setTitle] = useState();
  const [username, setUsername] = useState();
  const [datetime, setDatetime] = 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('getSelectSeniorList() /user/selectUserList.json error : ', error);
      });
    };
  
  //게시판
  const thead = [
    "No",
    "답변상태",
    "제목",
    "작성자",
    "작성일자",
  ];
  const key = [
    "No",
    "answer",
    "title",
    "writer",
    "date",
  ];
  const content = [
    {
      No: 1,
      answer: "답변완료",
      title: (
        <div className="title" onClick={() => {
          navigate("/QuestionConfirm");
        }}>담당자 바꿔주세요</div>
      ),
      writer: "홍길동",
      date: "2023-01-27",
    },

  ];
  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>
    </main>
  );
}