import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import {
  IGetGlobalResponse,
  IGetCoinsListRequest,
  IGetCoinsListResponse,
  IGetCoinsCountResponse,
  IGetCoinInfoRequest,
  IGetCoinInfoResponse,
  IGetCoinChartRequest,
  IGetCoinChartResponse,
} from './coinApi-types'

const baseUrl = "http://127.0.0.1:8080";
const marketsUrl = '/coins/markets';
const countUrl = '/count';
const globalUrl = '/global';
const coinInfoUrl = (id: string) => `/coin/${id}`;
const coinChartUrl = (coin: string, days: string) => `/coin/${coin}/chart/${days}`;

export const coinListApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
  endpoints: (builder) => ({
    getGlobal: builder.query<IGetGlobalResponse, void>({
      query: () => globalUrl,
    }),
    getCoinsList: builder.query<IGetCoinsListResponse, IGetCoinsListRequest>({
      query: (payload: IGetCoinsListRequest) => `${marketsUrl}?per_page=${payload.per_page}&page=${payload.page}`,
    }),
    getCoinsCount: builder.query<IGetCoinsCountResponse, void>({
      query: () => countUrl,
    }),
    getCoinInfo: builder.query<IGetCoinInfoResponse, string>({
      query: (id: string) => coinInfoUrl(id),
    }),
    getCoinChart: builder.query<IGetCoinChartResponse, IGetCoinChartRequest>({
      query: (payload: {coin: string, days: string}) => coinChartUrl(payload.coin, payload.days),
    }),
  }),
})

export const {
  useGetGlobalQuery,
  useGetCoinsListQuery,
  useGetCoinsCountQuery,
  useGetCoinInfoQuery,
  useGetCoinChartQuery
} = coinListApi;
