import * as React from 'react';
import { inject } from 'mobx-react';
import { computed, makeObservable } from 'mobx';
import SEO from 'utils/SEO';
import { withTranslation, WithTranslation } from 'utils/i18n';
import { profileColor } from 'utils/helpers';

import { ContainerDeprecated, EmptyMessage, Row } from '@nova-hf/ui';
import RefillHistoryQuery from 'graphql/queries/refillHistory';
import HeroProfile from 'containers/hero/HeroProfile';
import Wrapper from 'components/app-layout/Wrapper';
import { IRefillHistoryItem, IRateplan } from 'typings';

import { RefillListItemLoading } from './containers/components/RefillListItemLoading';
import { RefillList } from './containers/components/RefillList';
import { RefillListItem } from './containers/components/RefillListItem';

interface IAfyllingarsagaProps extends WithTranslation {
  ui?: any;
  subscriptionId: string;
  query: any;
  link: string;
}

@inject('ui')
class Afyllingarsaga extends React.Component<IAfyllingarsagaProps> {
  constructor(props: IAfyllingarsagaProps) {
    super(props);

    makeObservable(this, {
      headers: computed,
    });
  }

  static getInitialProps({ pathname, query }: any) {
    const { subscriptionId, date } = query;

    return {
      subscriptionId,
      date: date ? date : new Date(),
      namespacesRequired: ['common', 'refill'],
      link: pathname,
    };
  }

  get headers() {
    const { t } = this.props;

    return {
      date: t('date'),
      refill: t('refill'),
      type: t('type'),
      amount: t('amount'),
    };
  }

  render() {
    const {
      subscriptionId,
      ui: { pageColor },
      t,
    } = this.props;

    return (
      <Wrapper header="dark">
        <SEO title={subscriptionId} />
        <HeroProfile
          subtitleLink="/thjonustur"
          color={pageColor}
          background="white"
          subscriptionId={subscriptionId}
        />
        <ContainerDeprecated underBar spacing>
          <RefillHistoryQuery variables={{ subscriptionId }}>
            {({ data, error, loading }) => {
              if (loading) {
                return (
                  <Row>
                    <RefillList headers={this.headers}>
                      <RefillListItemLoading />
                      <RefillListItemLoading />
                      <RefillListItemLoading />
                      <RefillListItemLoading />
                      <RefillListItemLoading />
                    </RefillList>
                  </Row>
                );
              }

              if (error || !data || !data.me) {
                return <EmptyMessage title={t('noHistory')} description={t('noHistoryMessage')} />;
              }

              const {
                me: { profiles },
              } = data;
              const {
                refills: { refillHistory },
                rateplan,
              } = profiles[0];
              const rateplanColor = profileColor(rateplan as IRateplan);

              if (refillHistory.length <= 0) {
                return <EmptyMessage title={t('noHistory')} description={t('noHistoryMessage')} />;
              }

              return (
                <RefillList headers={this.headers}>
                  {refillHistory.map((item: IRefillHistoryItem, i: number) => {
                    return <RefillListItem key={`item-${i}`} color={rateplanColor} item={item} />;
                  })}
                </RefillList>
              );
            }}
          </RefillHistoryQuery>
        </ContainerDeprecated>
      </Wrapper>
    );
  }
}

export default withTranslation('refill')(Afyllingarsaga);