//Component
function QNA() {

  const [qnaList, setQnAList] = Plain.useState([]);
  //login 과정도 useState로 구현할 수 있음 -> 하지만 난 못했찌.
  //const [loginId, setLoginId] = Plain.useState(null);

  function renderQnA(data) {
    const target = $(".qna-wrap");
    const resultHTML = getQnATemplate(data);
    target.innerHTML = resultHTML;
  }
  async function initRender(callback) {
    try {
      const res = await fetch(URL.INIT);
      const result = await res.json();
      setQnAList(data => result.list || data);
    } catch (err) {
      console.error("render fetching error");
    }
  }

  return {
    render() {
      if (qnaList.length > 0) renderQnA(qnaList)
    },
    initComponent() {
      initRender(() => {
        console.log("init render end")
      })
    }
  };
}

document.addEventListener("DOMContentLoaded", () => {
  let qnaService = Plain.renderComponent(QNA);
  qnaService.initComponent();

  const token = localStorage.getItem('token')
  if (token) isTokenValid(token) ? qnaService.initComponent() : '';

  $('.login-btn').addEventListener("click", () => $('.login-btn').innerText === '로그인' ? getLogin() : getLogout())
});

const getLogin = () => {
  const fetchData = {
    user: 'soom'
  };
  let isSuccess = false;
  fetch(URL.LOGIN, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(fetchData),
    })
    .then(response => response.json())
    .then(data => {
      if (data.auth) {
        console.log(data.message, '로그인 되셨습니당...');
        localStorage.setItem('token', data.token);
        localStorage.setItem('username', fetchData.user);
        isSuccess = !isSuccess;
      } else {
        console.log('login: error')
      }
    }).then(() => {
      if (isSuccess) {
        const userName = localStorage.getItem('username');
        $('.login-btn').innerText = userName;
      }
    })
    .catch(e => console.log(e));
}

const getLogout = () => {
  localStorage.clear();
  $('.login-btn').innerText = "로그인";
  console.log('로그아웃 되셨습니당...')
}

const isTokenValid = () => {
  fetch("/api/token-validation", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
    .then(response => response.json())
    .then(data => {
      if (data.authResult) {
        localStorage.setItem('username', data.id)
        return true;
      } else {
        console.log('token-validation: error');
        return false;
      }
    })
    .catch(e => console.log(e))
}