import React, { useState } from "react";

import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import {
  Box,
  Chip,
  Collapse,
  Grid2 as Grid,
  IconButton,
  TableRow,
  Typography,
} from "@mui/material";

import { DateTime } from "luxon";

import { TableCell } from "../../../components/Table/TableCell";
import { useI18n } from "../../../contexts/I18nContext";
import { currencyFormat } from "../../pos/utils/amountToCurrencyString";
import { WalletTransaction } from "../types/wallet";

export interface WalletTransactionListItemProps {
  transaction: WalletTransaction;
}

const formatAmount = (value: string | number, currency: string) =>
  currencyFormat(Number(value), currency, "sv-SE", 2, "code");

const formatDate = (value: string) => DateTime.fromISO(value).toLocaleString(DateTime.DATETIME_MED);

const statusColor = (status: WalletTransaction["status"]) => {
  switch (status) {
    case "SETTLED":
      return "success";
    case "PENDING":
      return "info";
    case "ABORTED":
      return "default";
  }
};

const WalletTransactionListItem: React.FC<WalletTransactionListItemProps> = ({ transaction }) => {
  const { t } = useI18n();
  const [open, setOpen] = useState(false);

  return (
    <>
      <TableRow hover sx={{ cursor: "pointer" }} onClick={() => setOpen(!open)}>
        <TableCell sx={{ whiteSpace: "nowrap" }}>
          {DateTime.fromISO(transaction.date_created).toLocaleString(DateTime.DATETIME_SHORT)}
        </TableCell>
        <TableCell>{transaction.description}</TableCell>
        <TableCell>{transaction.account_number}</TableCell>
        <TableCell>
          <Chip
            color={statusColor(transaction.status)}
            label={t(transaction.status)}
            size="small"
          />
        </TableCell>
        <TableCell
          align="right"
          sx={{
            color: transaction.action === "DEPOSIT" ? "success.main" : "text.primary",
            whiteSpace: "nowrap",
          }}
        >
          {formatAmount(transaction.amount, transaction.currency)}
        </TableCell>
        <TableCell padding="none" sx={{ width: 48 }}>
          <IconButton
            aria-label={t(open ? "Hide transaction details" : "Show transaction details")}
            size="small"
            onClick={(event) => {
              event.stopPropagation();
              setOpen(!open);
            }}
          >
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
      </TableRow>

      <TableRow>
        <TableCell colSpan={6} sx={{ border: 0, p: 0 }}>
          <Collapse unmountOnExit in={open} timeout="auto">
            <Box sx={{ bgcolor: "action.hover", p: 2 }}>
              <Grid container spacing={2}>
                <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                  <Typography color="text.secondary" variant="caption">
                    {t("Transaction ID")}
                  </Typography>
                  <Typography sx={{ overflowWrap: "anywhere" }} variant="body2">
                    {transaction.id}
                  </Typography>
                </Grid>
                <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                  <Typography color="text.secondary" variant="caption">
                    {t("Reference")}
                  </Typography>
                  <Typography variant="body2">{transaction.reference ?? "—"}</Typography>
                </Grid>
                <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                  <Typography color="text.secondary" variant="caption">
                    {t("Action")}
                  </Typography>
                  <Typography variant="body2">{t(transaction.action)}</Typography>
                </Grid>
                <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                  <Typography color="text.secondary" variant="caption">
                    {t("Date created")}
                  </Typography>
                  <Typography variant="body2">{formatDate(transaction.date_created)}</Typography>
                </Grid>
                {transaction.date_settled && (
                  <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                    <Typography color="text.secondary" variant="caption">
                      {t("Date settled")}
                    </Typography>
                    <Typography variant="body2">{formatDate(transaction.date_settled)}</Typography>
                  </Grid>
                )}
                {transaction.date_aborted && (
                  <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                    <Typography color="text.secondary" variant="caption">
                      {t("Date aborted")}
                    </Typography>
                    <Typography variant="body2">{formatDate(transaction.date_aborted)}</Typography>
                  </Grid>
                )}
              </Grid>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </>
  );
};

export default WalletTransactionListItem;