/*!
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { HStack, Box, Code, Text } from "@chakra-ui/react";
import { useReactFlow } from "@xyflow/react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { MdOutlineStorage, MdTimeline } from "react-icons/md";
import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
import { Outlet, useParams } from "react-router-dom";

import { useAssetServiceGetAsset } from "openapi/queries";
import { BreadcrumbStats } from "src/components/BreadcrumbStats";
import { ProgressBar } from "src/components/ui";
import { GroupsProvider } from "src/context/groups";
import { NavTabs } from "src/layouts/Details/NavTabs";
import { useDocumentTitle } from "src/utils";

import { AssetGraph } from "./AssetGraph";
import { AssetPanelButtons } from "./AssetPanelButtons";
import { CreateAssetEvent } from "./CreateAssetEvent";
import { Header } from "./Header";

export const AssetLayout = () => {
  const { i18n, t: translate } = useTranslation(["assets", "common"]);
  const { assetId } = useParams();
  const direction = i18n.dir();
  const [dependencyType, setDependencyType] = useState<"data" | "scheduling">("scheduling");

  const { data: asset, isLoading } = useAssetServiceGetAsset(
    { assetId: assetId === undefined ? 0 : parseInt(assetId, 10) },
    undefined,
    {
      enabled: Boolean(assetId),
    },
  );

  useDocumentTitle(asset?.name);

  const links = [
    {
      label: asset?.name,
      title: translate("common:asset_one"),
      value: `/assets/${assetId}`,
    },
  ];

  const { fitView, getZoom } = useReactFlow();

  const tabs = [
    { icon: <MdTimeline />, label: translate("assets:events"), value: "" },
    {
      icon: <MdOutlineStorage />,
      label: translate("assets:assetStateStore.title"),
      value: "asset-state-store",
    },
  ];

  return (
    <>
      <HStack justifyContent="space-between" mb={2}>
        <BreadcrumbStats links={links} />
        <CreateAssetEvent asset={asset} />
      </HStack>
      <ProgressBar size="xs" visibility={Boolean(isLoading) ? "visible" : "hidden"} />
      <Box flex={1} minH={0}>
        <PanelGroup
          autoSaveId={`asset-${direction}`}
          dir={direction}
          direction="horizontal"
          key={`asset-${direction}`}
        >
          <Panel defaultSize={70} minSize={6}>
            <Box height="100%" position="relative" pr={2}>
              <AssetPanelButtons dependencyType={dependencyType} setDependencyType={setDependencyType} />
              <GroupsProvider dagId="~">
                <AssetGraph asset={asset} dependencyType={dependencyType} />
              </GroupsProvider>
            </Box>
          </Panel>
          <PanelResizeHandle
            className="resize-handle"
            onDragging={(isDragging) => {
              if (!isDragging) {
                const zoom = getZoom();

                void fitView({ maxZoom: zoom, minZoom: zoom });
              }
            }}
          >
            <Box bg="fg.subtle" cursor="col-resize" h="100%" transition="background 0.2s" w={0.5} />
          </PanelResizeHandle>
          <Panel defaultSize={30} minSize={20}>
            <Header asset={asset} />
            {asset?.extra && Object.keys(asset.extra).length > 0 ? (
              <Box mb={3} mt={3} px={3}>
                <Text fontWeight="bold" mb={2}>
                  {translate("assets:additional_data")}
                </Text>
                <Code
                  background="bg.subtle"
                  borderRadius="md"
                  color="fg.default"
                  display="block"
                  fontSize="sm"
                  p={2}
                  w="full"
                  whiteSpace="pre"
                >
                  {JSON.stringify(asset.extra, null, 2)}
                </Code>
              </Box>
            ) : null}

            <NavTabs tabs={tabs} />
            <Outlet />
          </Panel>
        </PanelGroup>
      </Box>
    </>
  );
};
