/**
 * @author : wonseog
 * @date : 2021/03/08
 * @description : 페이지 헤더
 **/

import "@src/assets/style/Header.scss";

import renderApp from "@src/App";

import { getState } from "@src/store/state";
import { addEventWithElementByType, handleFetchById } from "@src/shared/event";

const Header = (): string => {
  const { user } = getState();

  addEventWithElementByType(document.body, "click", function (e: Event) {
    if ((e.target as HTMLButtonElement).id === "update-button") {
      /* add POST event for button */
      handleFetchById("update?insta_id=", "#id-input");
      renderApp("main");
    }
  });

  return `
    <div class="header">
        <div class="form-container">
            <input type="text" name="insta_id" id="id-input" placeholder="${user[0]}" value="${user[0]}" />
            <button id="update-button">UPDATE</button>
        </div>
    </div>
`;
};

export default Header;