<script lang="ts">
  /*** IMPORT ------------------------------------------- ***/
  import type { GraphQLField, GraphQLInputField } from "graphql";

  /*** UTILITY ------------------------------------------ ***/
  import { markdown } from "../../graphql/markdown.ts";
  import TypeLink from "./TypeLink.svelte";

  type Props = {
    field: GraphQLField<unknown, unknown> | GraphQLInputField;
    onNavigate: (typeName: string) => void;
  };

  let { field, onNavigate }: Props = $props();

  const args = $derived("args" in field ? field.args : []);
</script>

<style lang="scss">
  .field {
    display: grid;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
  }

  .heading {
    font-size: 0.95rem;
    font-weight: 600;
  }

  .section-label,
  .description,
  .arg-description {
    color: var(--uchu-yin-6);
  }

  .section-label {
    font-size: 0.7rem;
    letter-spacing: 0.05rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
  }

  .description {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .args {
    display: grid;
    gap: 1.5rem;
  }

  .arg {
    font-size: 0.8rem;

    &-description {
      font-size: 0.7rem;
      margin-left: 1rem;
      margin-top: 0.125rem;
    }
  }
</style>

<div class="field">
  <div class="heading">{field.name}</div>
  {#if field.description}
    <div class="description">{@html markdown(field.description)}</div>
  {/if}

  <div>
    <div class="section-label">Type</div>
    <TypeLink {onNavigate} type={field.type}/>
  </div>

  {#if args.length > 0}
    <div>
      <div class="section-label">Arguments</div>

      <div class="args">
        {#each args as arg}
          <div class="arg">
            <span class="arg-name">{arg.name}</span>:
            <TypeLink {onNavigate} type={arg.type}/>
            {#if arg.description}
              <div class="arg-description">{@html markdown(arg.description)}</div>
            {/if}
          </div>
        {/each}
      </div>
    </div>
  {/if}
</div>
