import Image from "next/image";
import ListItemButton from "@mui/joy/ListItemButton";
import ListItemContent from "@mui/joy/ListItemContent";
import ListItemDecorator from "@mui/joy/ListItemDecorator";
import { ListItem, IconButton } from "@mui/joy";
import { Delete, Add } from "@mui/icons-material";
import Positions from "~/components/simulator/Positions";
import Typography from "@mui/joy/Typography";
import type {
  SelectedAsset,
  Position,
  SetAssets,
  SetPositions,
} from "~/interfaces/simulator";
import React, { useState } from "react";

const assetTitleSx = { fontSize: { xs: "sm", md: "md" } };

interface AssetModalProps {
  asset: SelectedAsset;
  assets: SelectedAsset[];
  setAssets: SetAssets;
  positions: Position[];
  setPositions: SetPositions;
}

export default function AssetModal({
  asset,
  assets,
  setAssets,
  positions,
  setPositions,
}: AssetModalProps) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Positions
        open={open}
        setOpen={setOpen}
        positions={positions}
        setPositions={setPositions}
        selectedAsset={asset}
      />
      <ListItem
        endAction={
          <IconButton aria-label='Delete' size='sm' color='danger'>
            <Delete
              onClick={() => {
                setAssets(
                  assets.filter((currAsset) => currAsset.id !== asset.id)
                );
                setPositions(
                  positions.filter((currPos) => currPos.ticker !== asset.ticker)
                );
              }}
            />
          </IconButton>
        }
        startAction={
          <IconButton
            aria-label='Add'
            size='sm'
            variant='plain'
            color='neutral'
          >
            <Add
              onClick={() => {
                setOpen(true);
              }}
            />
          </IconButton>
        }
      >
        <ListItemButton
          onClick={() => {
            setOpen(true);
          }}
        >
          <ListItemDecorator>
            <Image
              src={asset.logo ?? ""}
              width={30}
              height={30}
              alt={`${asset.ticker} logo`}
            />
          </ListItemDecorator>
          <ListItemContent sx={assetTitleSx}>
            {asset.ticker}
            <Typography level='body3'>{asset.name}</Typography>
          </ListItemContent>
        </ListItemButton>
      </ListItem>
    </>
  );
}