import React, { useMemo, useState } from 'react';
import { useParams } from 'react-router';
import { JSONSchemaContainer } from './components/JSONSchemaContainer';
import { Details } from './components/Details';
import { ScopeProcedure } from './components/ScopeProcedure';
import { Versions } from './components/Versions';
import { Tabs } from '@therms/atalaya';
import './index.css';
import { useLocalStorage } from 'beautiful-react-hooks';
import { ErrorBoundary } from '../../../../../../../components/ErrorBoundary';

export const RPCDetail = (props) => {
  const params = useParams();

  const [currentTabIndex, setCurrentTabIndex] = useLocalStorage(
    'currentTabIndex',
    0,
  );

  // array of RPC objects
  const currentRPCVersionList = useMemo(() => {
    if (!params.scope || !params.procedure) return [];

    return props.rpcScopeProcedure.allProceduresByScope[params.scope][
      params.procedure
    ];
  }, [params, props.rpcScopeProcedure]);

  // the current RPC
  const currentRPCVersion = useMemo(() => {
    return currentRPCVersionList.find(
      (rpc) => `${rpc.version}` === `${params.version}`,
    );
  }, [currentRPCVersionList, params]);

  const availableHeartbeatList = useMemo(() => {
    return props?.heartbeats?.map(({ displayName }) => displayName);
  }, [props.heartbeats]);

  const [jsonSchema, jsonSchemaTypeName] = useMemo(() => {
    if (currentRPCVersion) {
      if (currentTabIndex === 0) {
        return [
          currentRPCVersion?.args,
          `${currentRPCVersion.scope}-${currentRPCVersion.procedure}-v${currentRPCVersion.version}-args`,
        ];
      } else {
        return [
          currentRPCVersion?.data,
          `${currentRPCVersion.scope}-${currentRPCVersion.procedure}-v${currentRPCVersion.version}-data`,
        ];
      }
    }

    return [];
  }, [currentTabIndex, currentRPCVersion]);

  if (!currentRPCVersion) {
    return <h1>Select RPC from the menu</h1>;
  }

  return (
    <div>
      <div>
        <div className="mb-2">
          <ErrorBoundary>
            <ScopeProcedure
              rpcListAll={props.rpcListAll}
              rpcScopeProcedure={props.rpcScopeProcedure}
              params={params}
            />
          </ErrorBoundary>
        </div>

        <ErrorBoundary>
          <Versions
            rpcListAll={props.rpcListAll}
            rpcScopeProcedure={props.rpcScopeProcedure}
            params={params}
          />
        </ErrorBoundary>

        <ErrorBoundary>
          <Details
            rpcListAll={props.rpcListAll}
            rpcScopeProcedure={props.rpcScopeProcedure}
            params={params}
          />
        </ErrorBoundary>
      </div>

      <div>
        <ErrorBoundary>
          <div className="mb-2">
            <Tabs
              initialTabIndex={currentTabIndex}
              onTabClick={(index) => setCurrentTabIndex(index)}
            >
              <Tabs.Tab name="Args" />

              <Tabs.Tab name="Data" />
            </Tabs>
          </div>
        </ErrorBoundary>

        <ErrorBoundary>
          {!!jsonSchema ? (
            <JSONSchemaContainer
              jsonSchema={jsonSchema}
              jsonSchemaTypeName={jsonSchemaTypeName}
            />
          ) : (
            <div className="p-3">
              <center className="text-color-subtle">
                <em>No JSON-schema</em>
              </center>
            </div>
          )}
        </ErrorBoundary>
      </div>
    </div>
  );
};