import * as React from 'react';
import { EmptyMessage } from '@nova-hf/ui';
import { ArrowLink } from 'components/arrow-link/ArrowLink';
import { isEmpty } from 'lodash';
import { useRouter } from 'next/router';
import Profile from 'store/models/Profile';
import { useSubscriptionsQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import Loader from '../components/loader/Loader';
import ProfileListItem from '../components/profile-list-item/ProfileListItem';

interface ISubscriptionsLightProps {
  color: string;
}

const SubscriptionsLight = ({ color }: ISubscriptionsLightProps) => {
  const router = useRouter();
  const { t } = useTranslation(['subscriptions', 'common']);

  const { loading, error, data } = useSubscriptionsQuery({
    variables: {
      subscriptionsInput: {},
      accountInput: { ssn: router?.query.ssn as string },
    },
    skip: !router?.query.ssn,
  });

  if (error) {
    return <EmptyMessage description={t('noServicesFound')} />;
  }

  if (loading) {
    return <Loader text={t('common:query.fetchingData')} />;
  }

  if (!data || isEmpty(data) || !data.me) {
    return <EmptyMessage description={t('noServicesFound')} />;
  }

  const {
    me: {
      subscriptions: { subscriptions },
    },
  } = data;

  if (subscriptions?.length === 0) {
    return <EmptyMessage description={t('noServicesFound')} />;
  }

  return (
    <>
      {subscriptions?.map((p) => {
        const profile = new Profile(p);

        return (
          <ProfileListItem
            key={profile.subscriptionId}
            profile={profile}
            ssn={router?.query?.ssn as string}
          />
        );
      })}
    </>
  );
};

export default SubscriptionsLight;