import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Dialog, Divider, ListItem, ListItemProps, Title} from '@components';
import {useQuery} from '@hooks/queries-v5/useQuery';
import {Goal, GoalUser} from '@modules/goals/interfaces';
import {GOALS_QUERY_KEYS} from '@modules/goals/constants';
import {getGoalCycleDetail} from '@modules/goals/services';
import {useGetFormulaData} from '@modules/goals/hooks';
import {getCompleteName, getFormattedDate, getTimeAgo} from '@shared/utils';

import {styles} from './styles';

interface Props {
  isVisible: boolean;
  onClose: () => void;
  goal: Goal;
  owner?: GoalUser;
}

export function ResponsibleInfoModal({isVisible, onClose, goal, owner}: Props) {
  const {t} = useTranslation();
  const {formula} = useGetFormulaData({
    id: goal.formulaChainId!,
  });
  const {data: cycleDetail} = useQuery(
    GOALS_QUERY_KEYS.goalCycle(goal.goalCycleId),
    () => getGoalCycleDetail(goal.goalCycleId!),
    {enabled: !!goal.goalCycleId},
  );

  const data: ListItemProps[] = [
    {title: getTimeAgo(goal.createdAt), topText: t('goals.detail.creation')},
    {
      title: getFormattedDate(goal.endDate).toUpperCase(),
      topText: t('goals.start_date'),
    },
    {
      title: getFormattedDate(goal.endDate).toUpperCase(),
      topText: t('goals.ending_date'),
    },
    {
      title: cycleDetail?.name || '',
      topText: t('general.cycle'),
    },
    ...(formula
      ? [
          {
            title: formula.title,
            topText: t('general.formula'),
          },
        ]
      : []),
  ];

  return (
    <Dialog
      title={t('goals.responsible')}
      isVisible={isVisible}
      onClose={onClose}>
      {owner && (
        <>
          <ListItem
            avatar={{url: owner.profilePicture, name: owner}}
            title={getCompleteName(owner)}
            style={styles.responsibleData}
          />
          <Divider />
        </>
      )}
      {data.map((item, index) => (
        <View key={item.topText}>
          <Title
            title={item.title}
            topText={item.topText}
            style={styles.titleStyle}
          />
          {((!formula && index !== 3) || index !== 4) && <Divider />}
        </View>
      ))}
    </Dialog>
  );
}