import React from "react";
import { GlobalContext } from "@/context/Global";
import LeftPanel from "@/components/MobileUiBuilder/AndroidUI/LeftPanel";
import MiddlePanel from "@/components/MobileUiBuilder/AndroidUI/MiddlePanel";
import RightPanel from "@/components/MobileUiBuilder/AndroidUI/RightPanel";

const AddAdminAndroidPage = () => {
  const { state, dispatch: globalDispatch } = React.useContext(GlobalContext);

  React.useEffect(() => {
    globalDispatch({
      type: "SETPATH",
      payload: {
        path: "email",
      },
    });
  }, []);

  return (
    <div className="overflow-x-auto  rounded bg-white p-5 shadow">
      <div className="mb-3 flex w-full justify-between text-center  ">
        <h4 className="text-2xl font-medium">Android </h4>
      </div>
      <div className="flex h-screen overflow-x-auto border-b border-gray-200 shadow">
        <LeftPanel
          type="ANDROID"
          allowComponents={state.leftPanel}
          selectedPageComponent={state.selectedPageComponent}
        />
        <MiddlePanel
          type="ANDROID"
          componentList={state.middlePanel}
          selectedPage={state.selectedPageComponent}
        />
        <RightPanel
          type="ANDROID"
          component={state.rightPanel}
          componentId={state.rightComponentId}
          selectedPageComponent={state.selectedPageComponent}
        />
      </div>
    </div>
  );
};

export default AddAdminAndroidPage;
