import React, { useState } from "react";

import CancelIcon from "@mui/icons-material/Cancel";
import CheckIcon from "@mui/icons-material/Check";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import PriorityHighOutlinedIcon from "@mui/icons-material/PriorityHighOutlined";
import { Avatar, Collapse, IconButton, Stack, Table, TableBody } from "@mui/material";
import Chip from "@mui/material/Chip";
import TableRow from "@mui/material/TableRow";

import { DateTime } from "luxon";

import { TableCell } from "../../../components/Table/TableCell";
import TableHead from "../../../components/Table/TableHead";
import TableHeading from "../../../components/Table/TableHeading";
import { useI18n } from "../../../contexts/I18nContext";
import { formatPurchaseNumber } from "../../../util/format_purchase_number";
import { SubscriptionPeriod } from "../types/subscription";

export interface SubscriptionsListItemProps {
  period: SubscriptionPeriod;
}

export const SubscriptionsListItem: React.FC<SubscriptionsListItemProps> = ({ period }) => {
  const [open, setOpen] = useState(false);
  const { t } = useI18n();

  return (
    <>
      <TableRow
        sx={{
          cursor: "pointer",
          "&:hover": {
            bgcolor: (theme) =>
              theme.palette.mode === "light" ? theme.palette.grey[200] : theme.palette.grey[700],
          },
        }}
        onClick={() => setOpen(!open)}
      >
        <TableCell>{DateTime.fromISO(period.from_date as string).toISODate()}</TableCell>
        <TableCell>{DateTime.fromISO(period.due_date as string).toISODate()}</TableCell>
        <TableCell align="right">{period.amount}</TableCell>
        <TableCell align="right">{formatPurchaseNumber(period.purchase_number)}</TableCell>
        <TableCell align="right">
          {period.date_confirmed != null ? (
            <Chip
              color="success"
              icon={<CheckCircleIcon />}
              label={t("Paid")}
              size="small"
              sx={{ textTransform: "uppercase" }}
            />
          ) : (
            <Chip
              color="error"
              icon={<CancelIcon />}
              label={t("Not paid")}
              size="small"
              sx={{ textTransform: "uppercase" }}
            />
          )}
        </TableCell>

        <TableCell sx={{ width: 34, pl: 0 }}>
          <Stack direction="row" justifyContent="end">
            <IconButton size="small" onClick={() => setOpen(!open)}>
              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
            </IconButton>
          </Stack>
        </TableCell>
      </TableRow>

      <TableRow sx={{ p: 0 }}>
        <TableCell
          colSpan={6}
          sx={{
            padding: "0 !important",
            border: 0,
            bgcolor: (theme) => (theme.palette.mode === "light" ? "grey.100" : "grey.800"),
          }}
        >
          <Collapse in={open} timeout="auto">
            <Table>
              <TableHead>
                <TableHeading width={150}>{t("Date created")}</TableHeading>
                <TableHeading>{t("Payment method")}</TableHeading>
                <TableHeading align="right">{t("Status")}</TableHeading>
                <TableHeading width={58} />
              </TableHead>

              <TableBody>
                {period.charges.map((charge) => (
                  <TableRow key={charge.id}>
                    <TableCell>
                      {DateTime.fromISO(charge.date_created as string).toISODate()}
                    </TableCell>

                    <TableCell>{charge.payment_token?.method}</TableCell>
                    <TableCell align="right">
                      <Stack direction="row" justifyContent="end">
                        {/* TODO Retry button, date_confirmed != null */}
                        {charge.reason}
                        {charge.reason === "" ? (
                          <Avatar sx={{ bgcolor: "success.light", width: 18, height: 18, ml: 1 }}>
                            <CheckIcon sx={{ width: 12, height: 12 }} />
                          </Avatar>
                        ) : (
                          <Avatar sx={{ bgcolor: "error.light", width: 18, height: 18, ml: 1 }}>
                            <PriorityHighOutlinedIcon sx={{ width: 12, height: 12 }} />
                          </Avatar>
                        )}
                      </Stack>
                    </TableCell>

                    <TableCell width={58} />
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Collapse>
        </TableCell>
      </TableRow>
    </>
  );
};

export default SubscriptionsListItem;