import electron from "electron";
import React, { useState } from "react";
import styled from "styled-components";
import ReactDom from "react-dom";

type Proptypes = {
}

const Content = styled.div`
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFF;
  padding: 50px;
  z-index: 1000;
`;

const Overlay = styled.div`
  position: fixed;
  top:0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 999;
`;

const Settings: React.FC<Proptypes> = () => {
  const [open, setOpen] = useState(false);
  const ipcHandler = () => {
    setOpen(true);
  };
  electron.ipcRenderer.on("show-settings", ipcHandler);

  if (!open) {
    return null;
  }

  return ReactDom.createPortal(
    <>
      <Overlay />
      <Content>
        <button type="button" onClick={() => { setOpen(false); }}>close</button>
      </Content>
    </>,
    document.getElementById("portal")!,
  );
};

export default Settings;