<script lang="ts">
  import Prism from '@magidoc/plugin-svelte-prismjs';
  import 'prismjs/components/prism-graphql.js';
  import 'prismjs/components/prism-json.js';
  import type { GraphQLObjectType } from 'graphql';
  import AnchorHeader from '../common/text/AnchorHeader.svelte';
  import { ContentSwitcher, Switch } from 'carbon-components-svelte';
  import { upsertCode } from './stores';
  import CodeSpan from '../common/code/CodeSpan.svelte';
import ObjectType from '../type/ObjectType.svelte';

  export let type: GraphQLObjectType;

  $: {
    upsertCode.setField(type);
  }

  let selectedTab = 0;
</script>

<section>
  <AnchorHeader id={'title'} depth={1}>
    Upsert - {type.name}
  </AnchorHeader>

  <div class="wrapper">
    <div class="content">
      <ObjectType {type} />
    </div>
    <div class="sample">
      <ContentSwitcher bind:selectedIndex={selectedTab}>
        <Switch text="JS (Autogenerated SDK)" />
        <Switch text="Python (Autogenerated SDK)" />
      </ContentSwitcher>
      <div>
        {#if selectedTab === 0}
          <AnchorHeader id={'installing'} depth={4}
            >Setting up the SDK</AnchorHeader
          >
          <p style="margin-bottom:12px">
            To use queries in JavaScript / TypeScript directly in your code,
            make sure you have already built the <a
              href="/getting-started#javascript--typescript-autogenerated-sdk"
              >Autogenerated JS SDK via the CLI</a
            >
          </p>
          <AnchorHeader id={'installing'} depth={4}
            >Running the query</AnchorHeader
          >
          <p style="margin-bottom:12px">
            In the below code, we assume the <CodeSpan>client</CodeSpan>
            is already authenticated instance of <CodeSpan
              >FDMQueryClient</CodeSpan
            >
            .
          </p>
          <p style="margin-bottom:12px">
            As well, the code below assumes that you have already imported <CodeSpan
              >everything</CodeSpan
            >. This is a built in functionality to help you fetch all immediate
            "scalar" values (non-nested values). Hence feel free to adjust the
            "depth" on the right hand side to see how nested values looks.
          </p>
          <Prism
            maxHeight={'20rem'}
            minHeight={'12rem'}
            source={$upsertCode.jsCode ??
              '# No query generated. Try increasing the depth'}
            language={'typescript'}
          />
        {/if}
        {#if selectedTab === 1}
          <AnchorHeader id={'installing'} depth={4}
            >Setting up the SDK</AnchorHeader
          >
          <p style="margin-bottom:12px">
            To use queries in Python directly in your code, make sure you have
            already built the <a
              href="/getting-started#python-autogenerated-sdk"
              >Autogenerated Python SDK via the CLI</a
            >
          </p>
          <AnchorHeader id={'installing'} depth={4}
            >Running the query</AnchorHeader
          >
          <p style="margin-bottom:12px">
            In the below code, we assume the <CodeSpan>client</CodeSpan>
            is already authenticated instance of <CodeSpan
              >FDMQueryClient</CodeSpan
            >
            .
          </p>
          <Prism
            maxHeight={'20rem'}
            minHeight={'12rem'}
            source={$upsertCode.pythonCode ??
              '# No query generated. Try increasing the depth'}
            language={'typescript'}
          />
        {/if}
      </div>
    </div>
  </div>
</section>

<style>
  .wrapper {
    display: flex;
  }
  .content {
    flex: 1;
  }
  .sample {
    width: 700px;
  }
</style>
