import React, { useCallback, useEffect, useState } from "react";

import AccountBalanceWalletOutlinedIcon from "@mui/icons-material/AccountBalanceWalletOutlined";
import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
import {
  Box,
  Button,
  Card as MuiCard,
  CardContent,
  Grid2 as Grid,
  Stack,
  TableBody,
  Typography,
} from "@mui/material";

import { Table } from "../../../components/Table";
import TableHead from "../../../components/Table/TableHead";
import TableHeading from "../../../components/Table/TableHeading";
import TableCard from "../../../components/TableCard";
import TableCardHeader from "../../../components/TableCardHeader";
import Content from "../../../containers/Content";
import { useApi } from "../../../contexts/ApiContext";
import { useI18n } from "../../../contexts/I18nContext";
import { useUser } from "../../../contexts/UserContext";
import { ContribComponent, LimitOffset } from "../../../types";
import { hasPermission } from "../../../util/has_permission";
import { currencyFormat } from "../../pos/utils/amountToCurrencyString";
import WalletTransactionDialog from "../components/WalletTransactionDialog";
import WalletTransactionListItem from "../components/WalletTransactionListItem";
import { WalletAccount, WalletTransaction } from "../types/wallet";

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

const WalletCard: ContribComponent<WalletAccount[]> = ({ data: accounts, params, refresh }) => {
  const api = useApi();
  const { t } = useI18n();
  const { user } = useUser();
  const { membership_number } = params as { membership_number: number };
  const [selectedAccountId, setSelectedAccountId] = useState(accounts.at(0)?.id ?? "");
  const [transactions, setTransactions] = useState<WalletTransaction[]>([]);
  const [dialogOpen, setDialogOpen] = useState(false);

  useEffect(() => {
    if (!accounts.some((account) => account.id === selectedAccountId)) {
      setSelectedAccountId(accounts.at(0)?.id ?? "");
    }
  }, [accounts, selectedAccountId]);

  const fetchTransactions = useCallback(async () => {
    if (!selectedAccountId) {
      setTransactions([]);
      return;
    }

    const operation = api.operations["wallet.contrib:member-wallet-transaction-list"];
    if (!operation) {
      throw new Error('Invalid action "wallet.contrib:member-wallet-transaction-list".');
    }

    const response = await operation.call({
      params: { membership_number, account_id: selectedAccountId },
      query: { page_size: "500" },
    });
    if (response.ok) {
      const page = (await response.json()) as LimitOffset<WalletTransaction>;
      setTransactions(page.results);
    }
  }, [api, membership_number, selectedAccountId]);

  useEffect(() => {
    fetchTransactions();
  }, [fetchTransactions]);

  const handleCreated = () => {
    refresh();
    fetchTransactions();
  };

  const selectedAccount = accounts.find((account) => account.id === selectedAccountId);
  const canAdjust =
    hasPermission(user, "wallet.add_wallettransaction") && selectedAccount !== undefined;

  return (
    <Content layout="fullWidth">
      <Stack gap={3} width="100%">
        <Grid container spacing={3}>
          {accounts.map((account) => {
            const selected = account.id === selectedAccountId;
            return (
              <Grid key={account.id} size={{ xs: 12, md: 6, lg: 4 }}>
                <MuiCard
                  sx={{
                    borderColor: selected ? "primary.main" : undefined,
                    borderRadius: 3,
                    boxShadow: 0,
                    cursor: "pointer",
                    height: "100%",
                  }}
                  variant="outlined"
                  onClick={() => setSelectedAccountId(account.id)}
                >
                  <CardContent>
                    <Stack alignItems="flex-start" direction="row" justifyContent="space-between">
                      <Box>
                        <Typography color="text.secondary" variant="body2">
                          {account.name}
                        </Typography>
                        <Typography fontWeight={600} mt={0.5} variant="h5">
                          {formatWalletAmount(account.balance, account.currency)}
                        </Typography>
                        <Typography color="text.disabled" mt={1} variant="caption">
                          {account.account_number}
                        </Typography>
                      </Box>
                      <AccountBalanceWalletOutlinedIcon color={selected ? "primary" : "action"} />
                    </Stack>
                  </CardContent>
                </MuiCard>
              </Grid>
            );
          })}
        </Grid>

        {accounts.length === 0 && (
          <Typography align="center" color="text.disabled" fontStyle="italic">
            {t("No wallet accounts registered")}
          </Typography>
        )}

        <TableCard>
          <TableCardHeader
            action={
              canAdjust ? (
                <Button
                  startIcon={<AddOutlinedIcon />}
                  variant="contained"
                  onClick={() => setDialogOpen(true)}
                >
                  {t("Adjust balance")}
                </Button>
              ) : undefined
            }
            title={t("Wallet transactions")}
          />
          <Table count={transactions.length}>
            <TableHead>
              <TableHeading>{t("Date")}</TableHeading>
              <TableHeading>{t("Description")}</TableHeading>
              <TableHeading>{t("Account")}</TableHeading>
              <TableHeading>{t("Status")}</TableHeading>
              <TableHeading align="right">{t("Amount")}</TableHeading>
              <TableHeading width={48} />
            </TableHead>
            <TableBody>
              {transactions.map((transaction) => (
                <WalletTransactionListItem key={transaction.id} transaction={transaction} />
              ))}
            </TableBody>
          </Table>
          {transactions.length === 0 && (
            <Typography color="text.disabled" fontStyle="italic" m="0 1.5em 1.5em">
              {t("No wallet transactions yet")}
            </Typography>
          )}
        </TableCard>
      </Stack>

      {dialogOpen && selectedAccount && (
        <WalletTransactionDialog
          account={selectedAccount}
          membershipNumber={membership_number}
          onClose={() => setDialogOpen(false)}
          onCreated={handleCreated}
        />
      )}
    </Content>
  );
};

export default WalletCard;