import React, { FC } from "react";
import { takeWhile } from "lodash-es";
import { get as getEnv, getPaymentMethods } from "../env";
import { FormSchema, renderDonationSummary, renderPaymentMethod, renderPaymentPlan } from "../schema";
import { PageState, useCurrentRouter } from "../services/router.service";
import { DetailPanel, DetailsCard } from "./atoms";

interface SummaryProps {
  data: FormSchema;
}

export const Summary: FC<SummaryProps> = ({ data }) => {
  const router = useCurrentRouter();
  const validStages = Object.keys(STAGE_COMPONENTS).filter((stage) => {
    if (stage === "plan") {
      return !getEnv("DONATION_SUPPORTER_MODE");
    }
    if (stage === "donation") {
      return getEnv("ASK_FOR_ADDITIONAL_DONATION") || getEnv("DONATION_SUPPORTER_MODE");
    }
    if (stage === "payment-method") {
      return getPaymentMethods().length > 1
    }
    if (stage === "payment-details") {
      // Don't show the payment details page if external GoCardless pages were used
      return getEnv("USE_GOCARDLESS_API") || data.paymentMethod !== "directDebit";
    }
    return true
  })
  const stages = takeWhile(
    validStages,
    (stage) => stage !== router.state.stage
  ) as PageState["stage"][];

  return (
    <DetailsCard>
      {stages.map((stage) => {
        const StageSummary = STAGE_COMPONENTS[stage];
        return <StageSummary key={stage} data={data} />;
      })}
    </DetailsCard>
  );
};

const STAGE_COMPONENTS: Record<PageState["stage"], FC<{ data: FormSchema }>> = {
  "enter-details": ({ data }) => (
    <DetailPanel label="Email" action={{ stage: "enter-details" }}>
      {data.email}
    </DetailPanel>
  ),
  plan: ({ data }) => (
    <DetailPanel label="Plan" action={{ stage: "plan" }}>
      {renderPaymentPlan(data)}
    </DetailPanel>
  ),
  donation: ({ data }) => (
    <DetailPanel label="Donation" action={{ stage: "donation" }}>
      {renderDonationSummary(data)}
    </DetailPanel>
  ),
  "payment-method": ({ data }) => (
    <DetailPanel label="Billing" action={{ stage: "payment-method" }}>
      {renderPaymentMethod(data)}
    </DetailPanel>
  ),
  "payment-details": ({ data }) => {
    if (data.paymentMethod === "directDebit") {
      return (
        <>
          <DetailPanel
            action={{ stage: "payment-details" }}
            label="Account Name"
          >
            {data.ddAccountHolderName}
          </DetailPanel>
          <DetailPanel
            action={{ stage: "payment-details" }}
            label="Account Number"
          >
            {data.ddAccountNumber}
          </DetailPanel>
          <DetailPanel action={{ stage: "payment-details" }} label="Sort Code">
            {data.ddSortCode}
          </DetailPanel>
        </>
      );
    }

    return null;
  },
  confirm: () => null
};