"use client";
import React, { useEffect } from "react";
import buildingsMockData from "./mock-data";

import { BuildingFormData } from "../Pages/build/buildschema1";
import BuildPageForm1 from "../Pages/build/buildform1";
import BuildPage1 from "../Pages/build/buildpage1";
import BuildInfo1 from "../Pages/build/buildinfo1";

function app000003() {
  const [modifyEnable, setModifyEnable] = React.useState<boolean | null>(false);
  const [isCreate, setIsCreate] = React.useState<boolean | null>(false);
  const [selectedId, setSelectedId] = React.useState<string | null>(null);
  const [tableData, setTableData] = React.useState<BuildingFormData[]>([]);

  const fecthData = async ({
    // Add any parameters if needed
    page = 1,
    pageSize = 10,
    orderBy = "asc",
    orderType = "name",
    query = {},
  }) => {
    // Simulate an API call
    const response = await new Promise((resolve) =>
      setTimeout(() => resolve(buildingsMockData), 1000)
    );
    setTableData(response as BuildingFormData[]);
  };
  // Fetch data when the component mounts

  useEffect(() => {
    fecthData({
      page: 1,
      pageSize: 10,
      orderBy: "asc",
      orderType: "uu_id",
      query: {},
    });
  }, []);

  const onSubmit = (data: BuildingFormData) => {
    console.log("Form data:", data);
    // Submit to API or do other operations
  };

  const handleUpdateModify = (uuid: string) => {
    setSelectedId(uuid);
    setModifyEnable(false);
  };

  const handleView = (uuid: string) => {
    setSelectedId(uuid);
    setModifyEnable(true);
  };

  return (
    <>
      <div className="h-screen overflow-y-auto">
        <BuildInfo1
          data={tableData}
          selectedId={selectedId}
          setIsCreate={() => setIsCreate(true)}
        />
        {!isCreate ? (
          <div className="min-w-full mx-4 p-6 rounded-lg shadow-md ">
            {!selectedId ? (
              <BuildPage1
                data={tableData}
                handleUpdateModify={handleUpdateModify}
                handleView={handleView}
              />
            ) : (
              <BuildPageForm1
                data={tableData.find((item) => item.uu_id === selectedId) || {}}
                onSubmit={onSubmit}
                modifyEnable={modifyEnable}
                setSelectedId={() => setSelectedId(null)}
              />
            )}
          </div>
        ) : (
          <>
            <BuildPageForm1
              data={{
                build_date: new Date(),
                decision_period_date: new Date(),
              }}
              onSubmit={onSubmit}
              modifyEnable={modifyEnable}
              setSelectedId={() => setIsCreate(null)}
            />
          </>
        )}
      </div>
    </>
  );
}

export default app000003;