import "reflect-metadata";
import "antd/dist/antd.min.css";
import ReactDOM from "react-dom/client";
import { extensions } from "./core/extensions/extensions";
import { SocketListener } from "./features/socket_listener/socket_listener";
import { RouterProvider } from "react-router-dom";
import { router } from "./core/routers/routers";
import { configure } from "mobx";
import { ThemeStore } from "./core/store/theme_store";
import { FormBuilderValidationModel } from "./core/model/form_builder_validation_model";
import { FormBuilder } from "./core/ui/form_builder/form_builder";
import { observer } from "mobx-react-lite";
import { useStore } from "./core/helper/use_store";
import { LifeCycleStore, ModalStore } from "./core/store/base_store";
import { CoreInput } from "./core/ui/input/input";
import { InputV2 } from "./core/ui/input/input_v2";
import { useState } from "react";
import { Button, Modal } from "antd";
import makeAutoObservable from "mobx-store-inheritance";
import { CoreButton } from "./core/ui/button/button";
import { SelectDetail } from "./core/ui/form_builder/forms/select_detail/presentation/select_detail_screen";

configure({
  enforceActions: "never",
});

extensions();

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
export const themeStore = new ThemeStore();

class FormBuilderTextStore extends ModalStore {
  viewModel = FormBuilderValidationModel.empty();
  constructor() {
    super();
    makeAutoObservable(this);
  }
  init = undefined;
}
export const FormBuildTest = observer(() => {
  const [store] = useState(new FormBuilderTextStore());

  return (
    <div>
      <InputV2 label={"result"} onChange={(text) => (store.viewModel.result = text)} />
      <InputV2 label={"context"} onChange={(text) => (store.viewModel.context = text)} />
      <CoreButton text="click" onClick={() => (store.isModalOpen = true)} />
      <Modal
        destroyOnClose={true}
        open={store.isModalOpen}
        footer={null}
        closable={false}
        closeIcon={null}
        onCancel={() => {
          store.isModalOpen = false;
        }}
      >
        <FormBuilder
          formBuilder={store.viewModel}
          onChange={(e) => {
            console.log(e.output);
            // console.log(JSON.stringify(e.output))
          }}
        />
      </Modal>
    </div>
  );
});
root.render(
  <>
    {/* <FormBuildTest /> */}
    {/* <SocketListener>
      <RouterProvider router={router} />
    </SocketListener> */}
    <SelectDetail
    // @ts-expect-error
      dependency={{}}
      onChange={function (obj: any): void {
        throw new Error("Function not implemented.");
      }}
    />
  </>
);