import * as React from 'react';
import { observer, inject } from 'mobx-react';

import ConfirmServicepackChange from './ConfirmServicepackChange';
import ConfirmRateplanChange from './ConfirmRateplanChange';
import ConfirmAutoRefillChange from './ConfirmAutoRefillChange';

interface IConfirmChangeProps {
  change?: any;
  color: string;
  subscriptionId: string;
}

const ConfirmChange = ({ change, color, subscriptionId }: IConfirmChangeProps) => {
  const { selectedRefill, selectedServicepack, selectedRateplan } = change;

  if (selectedRefill) {
    return <ConfirmAutoRefillChange subscriptionId={subscriptionId} color={color} />;
  } else if (selectedServicepack) {
    return <ConfirmServicepackChange subscriptionId={subscriptionId} color={color} />;
  } else if (selectedRateplan) {
    return <ConfirmRateplanChange subscriptionId={subscriptionId} color={color} />;
  }
  return null;
};

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