import React from "react";
import { useNavigate } from "react-router";
import Container from "src/components/Container";
import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
import { Button } from "src/components/ui/button";
import { cn } from "src/lib/utils";
import { BackendType } from "src/types";

import { backendTypeConfigs } from "src/lib/backendType";
import useSetupStore from "src/state/SetupStore";

const backendTypeDisplayConfigList = Object.entries(backendTypeConfigs).map(
  (entry) => ({
    ...entry[1],
    backendType: entry[0] as BackendType,
  })
);

export function SetupNode() {
  const navigate = useNavigate();
  const setupStore = useSetupStore();
  const [selectedBackendType, setSelectedBackupType] =
    React.useState<BackendType>();

  function next() {
    if (!selectedBackendType) {
      return;
    }
    navigate(`/setup/node/${selectedBackendType.toLowerCase()}`);
  }

  const hasImportedMnemonic =
    !!setupStore.nodeInfo.mnemonic && setupStore.hasImportedMnemonic;

  return (
    <Container>
      <TwoColumnLayoutHeader
        title="Choose Wallet Implementation"
        pageTitle="Choose Wallet Implementation"
        description="Decide between one of available lightning wallet backends."
      />
      <div className="flex flex-col gap-5 w-full mt-6">
        <div className="w-full grid grid-cols-2 gap-3">
          {backendTypeDisplayConfigList
            .filter((item) =>
              hasImportedMnemonic
                ? backendTypeConfigs[item.backendType].hasMnemonic
                : true
            )
            .map((item) => (
              <div
                key={item.backendType}
                className={cn(
                  "border-foreground-muted border px-4 py-6 flex flex-col gap-3 items-center rounded cursor-pointer",
                  selectedBackendType === item.backendType && "border-primary"
                )}
                onClick={() => setSelectedBackupType(item.backendType)}
              >
                <div className="h-6 w-6">{item.icon}</div>
                {item.title}
              </div>
            ))}
        </div>
        <Button onClick={() => next()} disabled={!selectedBackendType}>
          Next
        </Button>
      </div>
    </Container>
  );
}