import React, { useEffect } from 'react';
import { observer, inject } from 'mobx-react';
import { EmptyMessage } from '@nova-hf/ui';

import SEO from 'utils/SEO';
import { useTranslation } from 'utils/i18n';
import Hero from 'containers/hero/Hero';
import Wrapper from 'components/app-layout/Wrapper';
import { useWalletCardsAdminCardsQuery } from 'typings/graphql';

import { SubNavigation } from '../containers/sub-navigation/SubNavigation';
import { Item } from './components/item/Item';
import { List } from './components/item/List';
import { Loading } from './components/loading/Loading';

interface IKortProps {
  ui?: any;
  query: any;
  page: number;
  search: string;
  department: string;
  rateplan: string;
  date: string;
}

const Kort = ({ ui }: IKortProps) => {
  const { t } = useTranslation('cards');
  const { data, loading, refetch } = useWalletCardsAdminCardsQuery();

  useEffect(() => {
    refetch();
  }, []);

  return (
    <Wrapper>
      <SEO title={t('shared.cards')} />
      <Hero title={t('shared.cards')} color={ui.pageColor} />
      <SubNavigation />

      <List>
        {loading && <Loading />}

        {!loading && !data?.walletCardsAdminCards.cards?.length && (
          <EmptyMessage
            title={t('cards.emptyTitle')}
            description={t('cards.emptyDescription')}
          />
        )}

        {!loading &&
          (data?.walletCardsAdminCards.cards ?? []).map((card) => {
            if (!card?.cardId) {
              return null;
            }

            return (
              <Item
                key={card.cardId}
                cardId={card.cardId}
                name={card.name}
                expiry={card.expiryDate}
                count={card.usersCount}
                image={card.cardFront}
              />
            );
          })}
      </List>
    </Wrapper>
  );
};

Kort.getInitialProps = () => {
  return {
    namespacesRequired: ['cards'],
  };
};

export default inject('ui')(observer(Kort));