import React, { ChangeEvent } from "react";
import ToastEditor from "tui-image-editor";

import { SubmenuContext } from "context/Submenu";

import "./EditorHeader.scss";

// TODO: 버튼 노출 규칙 정리하기
// TODO: 다크모드/라이트모드에 따른 버튼 스타일 수정하기
// TODO: 다크모드 토글 버튼을 input 타입 checked로 변경하기

interface EditorHeaderProps {
  editor: ToastEditor;
  imageLoad: boolean
}

function EditorHeader({ editor, imageLoad }: EditorHeaderProps) {
  function onLoadImage(e: ChangeEvent<HTMLInputElement>): void {
    const { files }  = e.target;
    if (files) {
      editor.loadImageFromFile(files[0])
        .then((result: any) => console.log(result));
    }
  }

  function toggleSubmenu() {
    console.log("toggle Submenu");
  }

  return (
    <div className="my-header">
      <SubmenuContext.Consumer>
        {({ visible, onChange }) => {
          console.log(visible);
          return (
            <button className={`submenu-toggle ${visible && "activate"}`} onClick={() => onChange()}>
              <i className="fas fa-list" />
            </button>
          );
        }}
      </SubmenuContext.Consumer>

      {/*<button>다크모드</button>*/}
      {imageLoad ? (
        <>
          <button>다운로드</button>
          <button>저장하기</button>
          <button>새 작업</button>
        </>
      ) : (
        <>
          <span className="file-box">
            <button><label htmlFor="input-image-file" className="file-box-button">파일 로드</label></button>
            <input type="file" accept="image/*" id="input-image-file" onChange={(e: ChangeEvent<HTMLInputElement>) => onLoadImage(e)}/>
          </span>

          <button>URL 로드</button>
        </>
      )}

    </div>
  );
}

export default EditorHeader;