import React from 'react';
import { observer, inject } from 'mobx-react';
import format from 'date-fns/format';

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

import { SubNavigation } from '../containers/sub-navigation/SubNavigation';
import { Aside } from './components/aside/Aside';
import { Main } from './components/main/Main';
import { Content } from './components/content/Content';
import { Benefit } from './components/benefits/Benefit';
import { Heading } from './components/heading/Heading';
import { Dl } from './components/dl/Dl';
import { Loading } from './components/loading/Loading';

interface IKortidProps {
  ui?: any;
  cardId: string;
}

const dateFormat = 'd.M.yyyy';

const Kortid = ({ ui, cardId }: IKortidProps) => {
  const { t } = useTranslation('cards');
  const { data, loading } = useWalletCardsAdminCardQuery({
    variables: {
      input: { cardId },
    },
  });

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

      {loading && <Loading />}

      {!loading && data && (
        <>
          <Heading>{data?.walletCardsAdminCard.card?.name}</Heading>

          <Content>
            <Aside>
              <Dl
                label={t('shared.description')}
                data={data.walletCardsAdminCard.card?.description}
              />

              {data.walletCardsAdminCard.card?.expiryDate && (
                <Dl
                  label={t('shared.expiryDate')}
                  data={format(
                    new Date(data.walletCardsAdminCard.card.expiryDate),
                    dateFormat
                  )}
                />
              )}

              <Dl
                label={t('shared.cardId')}
                data={data?.walletCardsAdminCard.card?.cardId}
              />

              <Dl
                label={t('subNavigation.users')}
                data={data?.walletCardsAdminCard.card?.usersCount}
              />
            </Aside>

            <Main>
              {data?.walletCardsAdminCard.card?.benefits?.map((benefit) => (
                <Benefit
                  key={benefit?.id}
                  logo={benefit?.company.logo ?? ''}
                  title={benefit?.company.name ?? '—'}
                  subtitle={benefit?.name ?? '—'}
                  type={benefit?.label === '2F1' ? '2f1' : 'discount'}
                  details={{
                    description: benefit?.description ?? '—',
                    website: benefit?.company.websiteUrl ?? '—',
                  }}
                />
              ))}
            </Main>
          </Content>
        </>
      )}
    </Wrapper>
  );
};

Kortid.getInitialProps = ({ query }: any) => {
  return {
    cardId: query.cardId,
    namespacesRequired: ['cards'],
  };
};

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