import { useQuery } from 'react-query';

import { getFavListIndexStats } from '../services';
import { FavListIndexParams } from '../types';

import { pxKeys } from '../queries';

import FavorabilityIndex from './FavorabilityIndex';

type FavListIndexProps = {
  surveyId: FavListIndexParams['surveyId'];
};

const FavListIndex = ({ surveyId }: FavListIndexProps) => {
  const queryParams: FavListIndexParams = {
    surveyId,
  };

  const { data, isLoading } = useQuery(
    pxKeys.favListIndexStats(queryParams),
    () => getFavListIndexStats(queryParams),
    {
      select: response => response.data,
    },
  );

  return (
    <FavorabilityIndex
      score={data?.score}
      promoters={data?.stats?.promoters}
      detractors={data?.stats?.detractors}
      neutrals={data?.stats?.neutrals}
      metadata={[
        { transKey: 'answer.answer', count: data?.answersAmount },
        { transKey: 'comment.comment', count: data?.commentsAmount },
      ]}
      passedThreshold={data?.passedThreshold ?? false}
      isLoading={isLoading}
    />
  );
};

export default FavListIndex;