import Stack from '@material-hu/mui/Stack';

import DataContainer from '@material-hu/components/composed-components/profile/DataContainer';
import StateCard from '@material-hu/components/design-system/StateCard';

import { useRequiredAuth } from 'src/contexts/JWTContext';
import { type UserProfile } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useInfoData, useSegmentationData } from '../hooks/useInfoData';

type InformationTabProps = {
  user: UserProfile;
};

const InformationTab = ({ user }: InformationTabProps) => {
  const { t } = useLokaliseTranslation(['profile']);
  const { user: currentUser } = useRequiredAuth();
  const isSameUser = currentUser.id === user.id;
  const infoData = useInfoData(user);
  const segmentationData = useSegmentationData(user);
  const isEmpty = !(infoData.length + segmentationData.length);
  if (isEmpty) {
    return (
      <StateCard
        title={t(
          'empty_state.title.' +
            (isSameUser ? 'information' : 'other_user_information'),
        )}
        description={t('empty_state.description.information')}
      />
    );
  }
  return (
    <Stack sx={{ gap: 2 }}>
      <DataContainer
        title={t('information.data')}
        sections={infoData}
      />
      <DataContainer
        title={t('information.segmentation')}
        sections={segmentationData}
      />
    </Stack>
  );
};

export default InformationTab;