import * as React from 'react';
import { useMutation } from '@apollo/client';
import { AddConnectionItem } from 'components/connection/ConnectionItem';
import { ProfileBoxItem } from 'components/profile-list/ProfileBoxItem';
import Signup from 'containers/signup/Signup';
import { ACTIVATE_SUBSCRIPTION } from 'graphql/mutations/subscription';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';
import Change from 'store/models/Change';
import Profile from 'store/models/Profile';
import { profileColor } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

import Usage from '../usage/Usage';

interface IProfileProps {
  profile: Profile;
  change?: Change;
  onClick?(): any;
  onSelect(packIndex: number): any;
  selectedPack?: string;
  noButton?: boolean;
  allowEmptyUsage?: boolean;
  inGrid?: boolean;
  editMenu?: object;
  summariesLoading?: boolean;
  terminated?: Date | null;
}

const ProfileItem: React.FunctionComponent<IProfileProps> = (props) => {
  const { enqueueSnackbar } = useSnackbar();
  const [activate, { loading }] = useMutation(ACTIVATE_SUBSCRIPTION);
  const { t } = useTranslation('subscriptions');

  const {
    change,
    profile,
    onClick,
    onSelect,
    selectedPack,
    allowEmptyUsage,
    inGrid = false,
    editMenu,
    noButton,
    summariesLoading,
    terminated,
  } = props;
  const {
    onlyRateplanChangeAllowed,
    hasOfferings,
    subscriptionId,
    b1w,
    isPrepaid,
    statusCode,
    rateplan,
    isActive,
    signup,
  } = profile;
  const status =
    statusCode === 'b1w'
      ? `${t(`statusCode.${statusCode}.${isPrepaid ? 'prepaid' : 'postpaid'}`)} (${statusCode})`
      : `${t(`statusCode.${statusCode}`)} (${statusCode})`;
  const router = useRouter();

  const onButtonPress = async () => {
    if (b1w) {
      try {
        const { data } = await activate({
          variables: {
            subscriptionId,
          },
        });

        const {
          activate: { error },
        } = data;

        if (error) {
          enqueueSnackbar(t('activate.error', { message: error.message }), {
            variant: 'error',
          });
        } else {
          enqueueSnackbar(t('activate.success'), {
            variant: 'success',
          });
        }
      } catch (e) {
        enqueueSnackbar(t('activate.error', { message: e.message }), {
          variant: 'error',
        });
      }
    } else if (hasOfferings && !onlyRateplanChangeAllowed) {
      change.selectProfile(profile);
      router
        .push(`/${router.query.ssn}/thjonusta/${subscriptionId}/kaupa`)
        .then(() => window.scrollTo(0, 0));
    }
  };

  let buttonText = '';
  if (profile && (profile.profileStatusCode as number) < 3 && !noButton) {
    if (hasOfferings && !onlyRateplanChangeAllowed) buttonText = t('button.serviceButton');
    if (isPrepaid) buttonText = t('button.refillButton');
    if (b1w) buttonText = 'Tímabundin opnun';
  }

  return (
    <ProfileBoxItem
      key={subscriptionId}
      profile={profile}
      color={profileColor(rateplan)}
      onSelect={() => onButtonPress()}
      status={status}
      subtitlePrefix={t('paidBy')}
      onClick={onClick ? onClick : undefined}
      buttonText={buttonText}
      loading={loading}
      inGrid={!!inGrid}
      terminated={terminated}
      className="tourUsageBox"
      editMenu={editMenu}
      summaryLoading={summariesLoading}
    >
      {signup && <Signup color={profileColor(rateplan)} profile={profile} inConnectionItem />}
      {isActive && !signup && !b1w && (
        <Usage
          profile={profile}
          onSelect={onSelect}
          selectedPack={selectedPack}
          allowEmptyUsage={allowEmptyUsage}
        />
      )}
      {statusCode === 'b1w' && (
        <AddConnectionItem
          type="Mobile"
          arrow
          title={t('b1w')}
          description={status}
          color={profileColor(rateplan)}
          className="b1w"
        />
      )}
    </ProfileBoxItem>
  );
};

export default inject('change')(observer(ProfileItem));