import dynamic from "next/dynamic";
import React from "react";
import Split from "react-split";
import { useSnapshot } from "valtio";
import state from "../../state";
import { getSplit, saveSplit } from "../../state/actions/persistSplits";

const DeployEditor = dynamic(() => import("../../components/DeployEditor"), {
  ssr: false,
});

const Accounts = dynamic(() => import("../../components/Accounts"), {
  ssr: false,
});

const LogBox = dynamic(() => import("../../components/LogBox"), {
  ssr: false,
});

const Deploy = () => {
  const { deployLogs } = useSnapshot(state);
  return (
    <Split
      direction="vertical"
      gutterSize={4}
      gutterAlign="center"
      sizes={getSplit("deployVertical") || [40, 60]}
      style={{ height: "calc(100vh - 60px)" }}
      onDragEnd={(e) => saveSplit("deployVertical", e)}
    >
      <main style={{ display: "flex", flex: 1, position: "relative" }}>
        <DeployEditor />
      </main>
      <Split
        direction="horizontal"
        sizes={getSplit("deployHorizontal") || [50, 50]}
        minSize={[320, 160]}
        gutterSize={4}
        gutterAlign="center"
        style={{
          display: "flex",
          flexDirection: "row",
          width: "100%",
          height: "100%",
        }}
        onDragEnd={(e) => saveSplit("deployHorizontal", e)}
      >
        <div style={{ alignItems: "stretch", display: "flex" }}>
          <Accounts />
        </div>
        <div>
          <LogBox
            title="Deploy Log"
            logs={deployLogs}
            clearLog={() => (state.deployLogs = [])}
          />
        </div>
      </Split>
    </Split>
  );
};

export default Deploy;