import React, { useMemo } from "react";
import { Button, Panel } from "../components";
import { useFocus, useSelection, useVisualization } from "../data-access";
import { resultSetFocus } from "../data-access/store/interactionSlice";
import { useDispatch } from "react-redux";
import { ConnectionInspector } from "./ConnectionInspector";
import { VisualizationSettings } from "../vis/components/config/VisualizationSettings";
import { SelectionConfig } from "../vis/components/config/SelectionConfig";
import { SchemaSettings } from "../schema/panel/SchemaSettings";
import { QuerySettings } from "../querybuilder/panel/querysidepanel/QuerySettings";
import { useActiveVisualization } from "@graphpolaris/shared/lib/data-access";
import { getEnvVariable } from "@/config";

export function InspectorPanel(props: { children?: React.ReactNode }) {
  const buildInfo = getEnvVariable("GRAPHPOLARIS_VERSION") === "prod";
  const selection = useSelection();
  const focus = useFocus();
  const dispatch = useDispatch();

  const inspector = useMemo(() => {
    if (selection) return <SelectionConfig />;
    // if (!focus) return <ConnectionInspector />;
    // if (activeVisualizationIndex !== -1) return <ConnectionInspector  />;
    return <VisualizationSettings />;
    // if (focus.focusType === 'visualization') return <VisualizationConfigPanel />;
    // else if (focus.focusType === 'schema') return <SchemaDialog />;
    // else if (focus.focusType === 'query') return <QuerySettings />;
    return null;
  }, [focus, selection]);

  return (
    <Panel
      title={
        <div className="flex flex-row gap-0.5 items-center align-middle">
          <Button variant="ghost" size="2xs" className="hover:underline p-0" onClick={() => dispatch(resultSetFocus(undefined))}>
            GP
          </Button>
          {focus && (
            <>
              <span className="pb-0.5">{">"}</span>
              <Button variant="ghost" size="2xs" className="hover:underline p-0 capitalize">
                {focus.focusType}
              </Button>
            </>
          )}
          {selection && (
            <>
              <span className="pb-0.5">{">"}</span>
              <Button variant="ghost" size="2xs" className="hover:underline p-0">
                Selection
              </Button>
            </>
          )}
        </div>
      }
    >
      {inspector}

      <div className="flex flex-col w-full">
        <div className="mt-auto p-2 bg-light">
          <Button
            variantType="primary"
            variant="outline"
            size="xs"
            label="Report an issue"
            onClick={() =>
              window.open(
                "https://app.asana.com/-/login?u=https%3A%2F%2Fform.asana.com%2F%3Fk%3D2QEC88Dl7ETs2wYYWjkMXg%26d%3D1206648675960041&error=01",
                "_blank",
              )
            }
            className="block w-full"
          />
        </div>
      </div>
    </Panel>
  );
}