import { settings } from '@utils/config';
import {
  articleBySlugQuery,
  articlesCardQuery,
  articlesEndCursor,
  articlesQuery,
  articlesSlugQuery,
  totalArticlesQuery,
} from './articles.query';
import { sendCommentMutation } from './comments.mutation';
import { commentsQuery } from './comments.query';
import { sendMailMutation } from './contact.mutation';
import {
  thematicBySlugQuery,
  thematicsListQuery,
  thematicsSlugQuery,
  totalThematicsQuery,
} from './thematics.query';
import {
  topicBySlugQuery,
  topicsListQuery,
  topicsSlugQuery,
  totalTopicsQuery,
} from './topics.query';

export type Mutations = typeof sendMailMutation | typeof sendCommentMutation;

export type Queries =
  | typeof articlesQuery
  | typeof articleBySlugQuery
  | typeof articlesCardQuery
  | typeof articlesEndCursor
  | typeof articlesSlugQuery
  | typeof commentsQuery
  | typeof thematicBySlugQuery
  | typeof thematicsListQuery
  | typeof thematicsSlugQuery
  | typeof topicBySlugQuery
  | typeof topicsListQuery
  | typeof topicsSlugQuery
  | typeof totalArticlesQuery
  | typeof totalThematicsQuery
  | typeof totalTopicsQuery;

export type ArticleResponse<T> = {
  post: T;
};

export type ArticlesResponse<T> = {
  posts: T;
};

export type CommentsResponse<T> = {
  comments: T;
};

export type SendCommentResponse<T> = {
  createComment: T;
};

export type SendMailResponse<T> = {
  sendEmail: T;
};

export type ThematicResponse<T> = {
  thematic: T;
};

export type ThematicsResponse<T> = {
  thematics: T;
};

export type TopicResponse<T> = {
  topic: T;
};

export type TopicsResponse<T> = {
  topics: T;
};

export type PageInfo = {
  endCursor: string;
  hasNextPage: boolean;
  total: number;
};

export type Edges<T> = {
  cursor: string;
  node: T;
};

export type EdgesResponse<T> = {
  edges: Edges<T>[];
  pageInfo: PageInfo;
};

export type NodeResponse<T> = {
  node: T;
};

export type NodesResponse<T> = {
  nodes: T[];
};

export type EndCursor = Pick<
  EdgesResponse<Pick<PageInfo, 'endCursor'>>,
  'pageInfo'
>;

export type ResponseMap<T> = {
  [articleBySlugQuery]: ArticleResponse<T>;
  [articlesCardQuery]: ArticlesResponse<NodesResponse<T>>;
  [articlesEndCursor]: ArticlesResponse<EndCursor>;
  [articlesQuery]: ArticlesResponse<EdgesResponse<T>>;
  [articlesSlugQuery]: ArticlesResponse<EdgesResponse<T>>;
  [commentsQuery]: CommentsResponse<NodesResponse<T>>;
  [sendCommentMutation]: SendCommentResponse<T>;
  [sendMailMutation]: SendMailResponse<T>;
  [thematicBySlugQuery]: ThematicResponse<T>;
  [thematicsListQuery]: ThematicsResponse<EdgesResponse<T>>;
  [thematicsSlugQuery]: ThematicsResponse<EdgesResponse<T>>;
  [topicBySlugQuery]: TopicResponse<T>;
  [topicsListQuery]: TopicsResponse<EdgesResponse<T>>;
  [topicsSlugQuery]: TopicsResponse<EdgesResponse<T>>;
  [totalArticlesQuery]: ArticlesResponse<T>;
  [totalThematicsQuery]: ThematicsResponse<T>;
  [totalTopicsQuery]: TopicsResponse<T>;
};

export type GraphQLResponse<
  T extends keyof ResponseMap<U>,
  U
> = ResponseMap<U>[T];

export type BySlugVar = {
  /**
   * A slug.
   */
  slug: string;
};

export type EdgesVars = {
  /**
   * A cursor.
   */
  after?: string;
  /**
   * The number of items to return.
   */
  first: number;
  /**
   * A search query.
   */
  search?: string;
};

export type ByContentIdVar = {
  /**
   * An article id.
   */
  contentId: number;
};

export type SearchVar = {
  /**
   * A search term.
   */
  search?: string;
};

export type SendCommentVars = {
  /**
   * The author name.
   */
  author: string;
  /**
   * The author e-mail address.
   */
  authorEmail: string;
  /**
   * The author website.
   */
  authorUrl: string;
  /**
   * A mutation id.
   */
  clientMutationId: string;
  /**
   * A post or page id.
   */
  commentOn: number;
  /**
   * The comment body.
   */
  content: string;
  /**
   * The comment parent.
   */
  parent?: number;
};

export type SendMailVars = {
  /**
   * The mail body.
   */
  body: string;
  /**
   * A mutation id.
   */
  clientMutationId: string;
  /**
   * The reply to e-mail address.
   */
  replyTo: string;
  /**
   * The mail subject.
   */
  subject: string;
};

export type VariablesMap = {
  [articleBySlugQuery]: BySlugVar;
  [articlesCardQuery]: EdgesVars;
  [articlesEndCursor]: EdgesVars;
  [articlesQuery]: EdgesVars;
  [articlesSlugQuery]: EdgesVars;
  [commentsQuery]: ByContentIdVar;
  [sendCommentMutation]: SendCommentVars;
  [sendMailMutation]: SendMailVars;
  [thematicBySlugQuery]: BySlugVar;
  [thematicsListQuery]: EdgesVars;
  [thematicsSlugQuery]: EdgesVars;
  [topicBySlugQuery]: BySlugVar;
  [topicsListQuery]: EdgesVars;
  [topicsSlugQuery]: EdgesVars;
  [totalArticlesQuery]: SearchVar;
  [totalThematicsQuery]: null;
  [totalTopicsQuery]: null;
};

export type FetchAPIProps<T extends Queries | Mutations> = {
  /**
   * A GraphQL API URL.
   */
  api: string;
  /**
   * A GraphQL query.
   */
  query: T;
  /**
   * (Optional) The query variables.
   */
  variables?: VariablesMap[T];
};

/**
 * Fetch a GraphQL API.
 * @param {object} obj - An object.
 * @param {string} obj.api - A GraphQL API URL.
 * @param {Queries} obj.query - A GraphQL query.
 * @param {object} [obj.variables] - The query variables.
 */
export async function fetchAPI<T, U extends Queries | Mutations>({
  api,
  query,
  variables,
}: FetchAPIProps<U>): Promise<GraphQLResponse<U, T>> {
  const response = await fetch(api, {
    method: 'POST',
    headers: {
      'content-type': 'application/json;charset=UTF-8',
    },
    body: JSON.stringify({
      query,
      variables,
    }),
  });

  type JSONResponse = {
    data?: GraphQLResponse<U, T>;
    errors?: Array<{ message: string }>;
  };

  const { data, errors }: JSONResponse = await response.json();

  if (response.ok) {
    if (!data) return Promise.reject(new Error(`No data found"`));

    return data;
  } else {
    console.error('Failed to fetch API');
    const error = new Error(
      errors?.map((e) => e.message).join('\n') ?? 'unknown'
    );
    return Promise.reject(error);
  }
}

/**
 * Retrieve the API url from settings.
 *
 * @returns {string} The API url.
 */
export const getAPIUrl = (): string => {
  const { url } = settings.api;

  if (!url) {
    throw new Error('API url is not defined.');
  }

  return url;
};
.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */</style><div class="highlight"><pre><span></span><span class="k">@use</span><span class="w"> </span><span class="s2">&quot;@styles/abstracts/functions&quot;</span><span class="w"> </span><span class="nt">as</span><span class="w"> </span><span class="nt">fun</span><span class="o">;</span>

<span class="nc">.noscript</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nt">color</span><span class="nd">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--color-primary-darker</span><span class="o">);</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nt">--top</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">padding</span><span class="nd">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--spacing-xs</span><span class="o">)</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--spacing-sm</span><span class="o">);</span>
<span class="w">    </span><span class="nt">position</span><span class="nd">:</span><span class="w"> </span><span class="nt">fixed</span><span class="o">;</span>
<span class="w">    </span><span class="nt">top</span><span class="nd">:</span><span class="w"> </span><span class="nt">0</span><span class="o">;</span>
<span class="w">    </span><span class="nt">left</span><span class="nd">:</span><span class="w"> </span><span class="nt">0</span><span class="o">;</span>
<span class="w">    </span><span class="nt">right</span><span class="nd">:</span><span class="w"> </span><span class="nt">0</span><span class="o">;</span>
<span class="w">    </span><span class="nt">z-index</span><span class="nd">:</span><span class="w"> </span><span class="nt">10</span><span class="o">;</span>
<span class="w">    </span><span class="nt">background</span><span class="nd">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--color-bg</span><span class="o">);</span>
<span class="w">    </span><span class="nt">border-bottom</span><span class="nd">:</span><span class="w"> </span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="w"> </span><span class="nt">solid</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--color-border</span><span class="o">);</span>
<span class="w">    </span><span class="nt">font-size</span><span class="nd">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--font-size-sm</span><span class="o">);</span>
<span class="w">    </span><span class="nt">font-weight</span><span class="nd">:</span><span class="w"> </span><span class="nt">600</span><span class="o">;</span>
<span class="w">    </span><span class="nt">text-align</span><span class="nd">:</span><span class="w"> </span><span class="nt">center</span><span class="o">;</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</pre></div>