import { useQuery } from 'react-query';

import { getFavDimensionIndexStats } from '../services';
import { FavDimensionIndexStatsParams } from '../types';

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

import FavorabilityIndex from './FavorabilityIndex';

type FavDimensionIndexProps = {
  surveyId: FavDimensionIndexStatsParams['surveyId'];
  dimensionId: FavDimensionIndexStatsParams['dimensionId'];
};

const FavDimensionIndex = ({
  surveyId,
  dimensionId,
}: FavDimensionIndexProps) => {
  const queryParams: FavDimensionIndexStatsParams = {
    surveyId,
    dimensionId,
  };

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

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

export default FavDimensionIndex;