import type { Snippet } from "svelte";

  import {

    checkRadicleCLI,

    radicleInstalled,

  } from "@app/lib/checkRadicleCLI.svelte";

  import { didFromPublicKey, truncateDid } from "@app/lib/utils";

  import Command from "@app/components/Command.svelte";

  import CopyableId from "@app/components/CopyableId.svelte";

  import Repos from "@app/views/home/guides/Repos.svelte";

  import NodeId from "@app/components/NodeId.svelte";

  import Popover, { setFocused } from "@app/components/Popover.svelte";

  const { center, config }: Props = $props();

  .guide-header {

    padding-bottom: 1rem;

  }

  .spacer {

    width: 100%;

    border-bottom: 1px solid var(--color-border-default);

    height: 1px;

    margin: 1rem 0;

  }

        <Popover

          popoverId="popover-guide"

          popoverPadding="0"

          popoverPositionTop="2.5rem"

          popoverPositionRight="-9.3rem">

          {#snippet toggle(onclick)}

            <NakedButton variant="ghost" {onclick} stylePadding="0 4px">

              <Icon name="info" />

            </NakedButton>

          {/snippet}

          {#snippet popover()}

            <Border

              variant="ghost"

              styleGap="0"

              stylePadding="1rem"

              styleMinWidth="36rem"

              styleOverflow="auto"

              styleMaxHeight="calc(100vh - 5rem)"

              styleAlignItems="flex-start"

              styleFlexDirection="column">

              <div

                style:position="relative"

                style:display="flex"

                style:gap="0.5rem"

                style:flex-direction="column"

                style:padding="1rem"

                style:margin-bottom="1rem"

                style:width="100%"

                style:background-color="var(--color-background-float)">

                <div class="txt-semibold txt-medium" style:margin-bottom="1rem">

                  Getting started

                </div>

                <div class="txt-small" style:display="inline">

                  Hello <span style:padding-left="0.25rem">

                    <NodeId

                      inline

                      publicKey={config.publicKey}

                      alias={config.alias} />,

                  </span>

                  your identity has been created and stored on your machine.

                </div>

                <div class="txt-small">

                  Your public key is <CopyableId

                    inline

                    id={didFromPublicKey(config.publicKey)}>

                    {truncateDid(config.publicKey)}

                  </CopyableId>

                  you can share this with anyone to find you on the network.

                </div>

                <div class="spacer"></div>

                {#if radicleInstalled()}

                  <div class="global-flex txt-small">

                    <Icon name="checkbox-checked" />Radicle CLI is setup

                  </div>

                {:else}

                  <div class="txt-small">

                    <div class="global-flex" style:padding-bottom="0.5rem">

                      <Icon name="checkbox-unchecked" />Make sure to install

                      Radicle CLI

                    </div>

                    <div style:padding-bottom="0.5rem">

                      To be able to interact with repos on the Radicle network

                      you'll need to install a node on your computer. This node

                      will identify itself on the network with your keys to push

                      and pull changes.

                    </div>

                    <div style:padding-bottom="0.5rem">

                      To install the node and other Radicle CLI tooling, simply

                      run the command below from your shell:

                    </div>

                    <Command

                      styleWidth="fit-content"

                      command="curl -sSf https://radicle.xyz/install | sh" />

                  </div>

                {/if}

              </div>

              <div class="guide-header txt-medium txt-semibold">Guide</div>

              <Repos />

            </Border>

          {/snippet}

        </Popover>

#### 1. Find a repo on the Radicle network

You can search for Radicle repos by name or description at [search.radicle.xyz](https://search.radicle.xyz).

To clone a repo, you’ll need its Repository Identifier (RID) — a unique string that begins with `rad:`.

#### 2. Start your node

If you node is Offline, you should start it by running:

```sh

rad node start

```

#### 3. Clone the repo

To clone a repo, use the `rad clone` command followed by the RID of the repo you want to clone.

```sh

rad clone <RID>

```

<script lang="ts">

  import { z } from "zod";

  import publish from "@app/views/home/publish.md?raw";

  import clone from "@app/views/home/clone.md?raw";

  import Border from "@app/components/Border.svelte";

  import Markdown from "@app/components/Markdown.svelte";

  import Tab from "@app/components/Tab.svelte";

  import useLocalStorage from "@app/lib/useLocalStorage.svelte";

  const tab = useLocalStorage(

    "repoGuideTab",

    z.union([z.literal("clone"), z.literal("publish")]),

    "publish",

    !window.localStorage,

  );

</script>

<style>

  .container {

    overflow: scroll;

  }

  .tab {

    height: 1.5rem;

    color: var(--color-foreground-contrast);

  }

</style>

{#snippet tabSnippet(name: typeof tab.value, content: string)}

  <Tab

    active={tab.value === name}

    onclick={() => {

      tab.value = name;

    }}>

    <span class="tab">{content}</span>

  </Tab>

{/snippet}

<Border

  stylePosition="relative"

  variant="ghost"

  flatBottom

  styleDisplay="flex"

  styleWidth="100%"

  styleGap="1rem"

  stylePadding="0 1rem">

  {@render tabSnippet("clone", "Clone a repo from the network")}

  {@render tabSnippet("publish", "Publish existing repo")}

</Border>

<Border

  variant="ghost"

  flatTop

  stylePadding="1rem"

  styleDisplay="block"

  styleFlexDirection="column"

  styleAlignItems="flex-start">

  <div class="container txt-small">

    {#if tab.value === "clone"}

      <Markdown content={clone} />

    {:else if tab.value === "publish"}

      <Markdown content={publish} />

    {/if}

  </div>

</Border>

#### Publish existing repo on Radicle

Navigate to your existing Git repo and publish it to Radicle by following the setup prompts:

- **Repository Name:** Enter a name for your repo.

- **Description:** Provide a brief summary of what your repo does.

- **Default Branch:** Typically **main** or **master**.

- **Visibility:** Choose **public** to share with others or **private** to not publish it to the network yet.

```sh

cd path/to/your/repo

rad init

```

That's it! Your repo is now on the Radicle network. 🚀