import React, {useEffect} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useQuery} from 'react-query';
import useGetMeasurements from '@hooks/useGetMeasurements';
import {Navigation} from '@interfaces/navigation';
import {postQueryKeys} from '@modules/post/constants';
import {getPostInsightsSummary} from '@modules/post/services';
import {getGroupPostInsightsSummary} from '@modules/group/services';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';
import {commonStyles} from '@shared/styles';

import Summary from './components/Summary';
import Audience from './components/Audience';

function Insights({
  navigation,
  route: {
    params: {id, groupId},
  },
}: Navigation<Screens.INSIGHTS>) {
  const {t} = useTranslation();
  const [onLayout, measurements] = useGetMeasurements();
  const {theme} = useTheme();
  const {data} = useQuery(postQueryKeys.postSummary(id), () =>
    groupId
      ? getGroupPostInsightsSummary(groupId, id)
      : getPostInsightsSummary(id),
  );

  useEffect(() => {
    navigation.setOptions({
      title: t('post.post_analysis'),
    });
  }, [navigation, t]);

  return (
    <View
      style={[
        commonStyles.flex,
        {backgroundColor: theme.background.elements.default},
      ]}>
      <Summary data={data} onLayout={onLayout} />
      <Audience measurements={measurements} id={id} groupId={groupId} />
    </View>
  );
}

export default Insights;