import { ReactNode, useMemo } from "react";
import { Button, ButtonStatusType } from "../Button";

import clsx from "clsx";
import Container from "./Container";
import ListItem from "./ListItem";

interface SignTxPageProps {
  title?: string;
  TxInfo: {
    network: string | ReactNode;
    from: string | ReactNode;
    to?: string | ReactNode;
    amount?: string | ReactNode;
    networkFee?: string | ReactNode;
    description?: string | ReactNode;
    rawData?: string | ReactNode;
  };
  TxFields?: {
    network?: string | ReactNode;
    from?: string | ReactNode;
    to?: string | ReactNode;
    amount?: string | ReactNode;
    networkFee?: string | ReactNode;
    description?: string | ReactNode;
    rawData?: string | ReactNode;
  };
  AmountNetworkFeeSlot?: ReactNode;
  onConfirm: () => unknown;
  onReject: () => unknown;
  confirmBtnStatus?: ButtonStatusType;
  confirmDisabled?: boolean;
}

const defaultFieldTitles = {
  network: "Network",
  from: "From",
  to: "To",
  amount: "Amount",
  networkFee: "Network Fee",
  description: "Description",
  rawData: "Raw Data",
};

function getTxInfoList(
  TxInfo: SignTxPageProps["TxInfo"],
  TxFields: SignTxPageProps["TxFields"] = {},
  slots: { AmountNetworkFeeSlot?: ReactNode },
) {
  const netWorkTitle = TxFields.network || defaultFieldTitles.network;
  const fromTitle = TxFields.from || defaultFieldTitles.from;
  const toTitle = TxFields.to || defaultFieldTitles.to;
  const amountTitle = TxFields.amount || defaultFieldTitles.amount;
  const networkFeeTitle = TxFields.networkFee || defaultFieldTitles.networkFee;
  const descriptionTitle =
    TxFields.description || defaultFieldTitles.description;
  const rawDataTitle = TxFields.rawData || defaultFieldTitles.rawData;

  const list = [
    {
      title: netWorkTitle,
      content: TxInfo.network,
    },
    {
      title: fromTitle,
      content: TxInfo.from,
    },
    {
      title: toTitle,
      content: TxInfo.to,
    },
    {
      title: amountTitle,
      content: TxInfo.amount,
    },
    {
      slot: slots.AmountNetworkFeeSlot,
    },
    {
      title: networkFeeTitle,
      content: TxInfo.networkFee,
    },
    {
      title: descriptionTitle,
      content: TxInfo.description,
    },
    {
      ellipsis: true,
      title: rawDataTitle,
      content: TxInfo.rawData,
    },
  ];

  return list.filter((i) => i.content || i.slot);
}

export default function SignTransaction(props: SignTxPageProps) {
  const {
    TxInfo,
    onConfirm,
    onReject,
    confirmBtnStatus = "normal",
    TxFields = {},
    confirmDisabled,
    AmountNetworkFeeSlot,
    title = "Sign Tx",
  } = props;

  const txInfoList = useMemo(() => {
    return getTxInfoList(TxInfo, TxFields, { AmountNetworkFeeSlot });
  }, [TxInfo, TxFields]);

  const Footer = (
    <div
      className={`uikit-mt-[25px] uikit-grid uikit-w-full uikit-grid-cols-2 uikit-items-end uikit-gap-5`}
    >
      <Button size="large" block onClick={onReject} theme="ghost">
        Reject
      </Button>
      <Button
        size="large"
        className="uikit-w-full"
        onClick={onConfirm}
        status={confirmBtnStatus}
        disabled={confirmDisabled}
      >
        Approve
      </Button>
    </div>
  );

  return (
    <Container
      className="uikit-font-switzer uikit-overflow-hidden uikit-bg-bg1"
      title={title}
      footer={Footer}
    >
      {/* Network */}
      {txInfoList.map(({ title, content, slot, ellipsis }, index) => {
        if (slot) return slot;
        return (
          <ListItem key={index} title={title}>
            <div
              className={clsx(
                `uikit-w-[100%] uikit-text-right uikit-overflow-hidden uikit-whitespace-nowrap uikit-text-ellipsis`,
                ellipsis ? "uikit-block" : "uikit-flex",
              )}
            >
              {content}
            </div>
          </ListItem>
        );
      })}
    </Container>
  );
}