<script lang="ts">
  import type { GraphQLField } from 'graphql';
  import type { QueryType } from '@magidoc/plugin-query-generator';
  import AppQueryGenerator from './AppQueryTabs.svelte';
  import ArgsList from './list/ArgsList.svelte';
  import QueryTypeTag from '../tags/QueryTypeTag.svelte';
  import TypeLink from '../type/TypeLink.svelte';
  import DeprecationNotice from '../common/text/DeprecationNotice.svelte';
  import AnchorHeader from '../common/text/AnchorHeader.svelte';
  import CarbonMarkdown from '../markdown/CarbonMarkdown.svelte';
  import { Tab, TabContent, Tabs, ContentSwitcher, Switch } from 'carbon-components-svelte';
  import AppPrism from './AppQueryGenerator.svelte';
  import { graphqlQuery } from './stores';
  import CodeSpan from '../common/code/CodeSpan.svelte';

  export let type: QueryType;
  export let field: GraphQLField<unknown, unknown, unknown>;

  $: {
    graphqlQuery.setField(field, type);
  }

  let selectedTab = 0;
</script>

<section>
  <DeprecationNotice deprecationReason={field.deprecationReason} />

  <AnchorHeader id={'title'} depth={1}>
    {field.name}<QueryTypeTag {type} />
  </AnchorHeader>

  <div class="wrapper">
    <div class="content">
      <CarbonMarkdown source={field.description} />

      {#if field.args.length > 0}
        <AnchorHeader id={'arguments'} depth={2}>Arguments</AnchorHeader>
        <ArgsList data={field.args} />
      {/if}

      {#if field.type}
        <AnchorHeader id={'response'} depth={2}>Response</AnchorHeader>
        <p>
          Returns <TypeLink type={field.type} />.
        </p>
      {/if}
    </div>
    <div class="sample">
      <ContentSwitcher bind:selectedIndex={selectedTab}>
        <Switch text="GraphQL" />
        <Switch text="JS (Autogenerated SDK)" />
        <Switch text="Python (Autogenerated SDK)" />
      </ContentSwitcher>
      <div>
        {#if selectedTab === 0}
          <AppQueryGenerator {type} {field} />
        {/if}
        {#if selectedTab === 1}
          <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>
          <AppPrism
            code={$graphqlQuery.jsQuery?.query ??
              '# No query generated. Try increasing the depth'}
            language={'typescript'}
          />
        {/if}
        {#if selectedTab === 2}
          <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>
          <AppPrism
            code={$graphqlQuery.pythonQuery?.query ??
              '# No query generated. Try increasing the depth'}
            language={'python'}
          />
        {/if}
      </div>
    </div>
  </div>
</section>

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