import * as React from 'react';
import { Button } from '@nova-hf/ui';
import Router from 'next/router';
import { useTranslation } from 'utils/i18n';
import { inject } from 'mobx-react';
import { NovaTvProfileBox } from 'components/profile-list/nova-tv/NovaTvProfileBox';
import { NovaTvProfileBoxHeader } from 'components/profile-list/nova-tv/NovaTvProfileBoxHeader';
import { NovaTvProfileBoxItem } from 'components/profile-list/nova-tv/NovaTvProfileBoxItem';
import Profile from 'store/models/Profile';
import Authentication from 'store/authentication';

interface INovaTvProfileItem {
  profile: Profile;
  inGrid: boolean;
  authentication?: Authentication;
}

const NovaTvProfileItem = ({ profile, inGrid, authentication }: INovaTvProfileItem) => {
  const { t } = useTranslation('subscriptions');
  const { subscriptionId, ssn } = profile;
  const isStaff = authentication?.isStaff;
  const queryParameter = isStaff && ssn ? `?ssn=${ssn}` : '';

  return (
    <NovaTvProfileBox key={subscriptionId} inGrid={!!inGrid}>
      <NovaTvProfileBoxHeader
        onClick={() => {
          Router.push(`/${ssn}/thjonusta/${subscriptionId}`);
        }}
      />
      {profile?.subscriptions
        ?.filter((s) => s.status !== 'Cancelled')
        ?.map((sub) => {
          return (
            <NovaTvProfileBoxItem
              key={sub.id}
              subscription={sub}
              onClick={() => {
                Router.push({
                  pathname: `/${ssn}/thjonusta/${subscriptionId}/askrift/${sub.id}`,
                  query: { ssn },
                });
              }}
            />
          );
        })}
      <Button
        background={'pink'}
        big
        fill
        noShadow
        linkComponent={
          <a
            target="_blank"
            rel="noreferrer"
            href={`https://www.nova.is/nova-tv/kaupa${queryParameter}`}
          />
        }
      >
        {t('novaTv.addSubscription')}
      </Button>
    </NovaTvProfileBox>
  );
};

export default inject('authentication')(NovaTvProfileItem);