import {
  List,
  ListItem,
  CircularProgress,
  Typography,
  ListDivider,
  Box,
} from "@mui/joy";
import { InfoOutlined } from "@mui/icons-material";
import { Fragment } from "react";
import AssetModal from "./AssetModal";
import useLocalization from "~/utils/useLocalization";
import type {
  Position,
  SelectedAsset,
  SetAssets,
  SetPositions,
} from "~/interfaces/simulator";

interface AssetListProps {
  assets: SelectedAsset[];
  setAssets: SetAssets;
  positions: Position[];
  setPositions: SetPositions;
  assetLoading: boolean;
}

export default function AssetList({
  assets,
  setAssets,
  positions,
  setPositions,
  assetLoading,
}: AssetListProps) {
  const { localization } = useLocalization();
  return (
    <List size='md'>
      {assets &&
        assets.length > 0 &&
        assets.map((asset, index) => (
          <Fragment key={asset.id}>
            <AssetModal
              asset={asset}
              assets={assets}
              setAssets={setAssets}
              positions={positions}
              setPositions={setPositions}
            />
            {index !== assets.length - 1 && <ListDivider />}
          </Fragment>
        ))}
      {assetLoading && (
        <ListItem>
          <CircularProgress size='sm' sx={{ bgcolor: "background.surface" }} />
        </ListItem>
      )}
      {!assetLoading && assets.length < 1 && (
        <Box display='flex' justifyContent='center'>
          <Typography startDecorator={<InfoOutlined />} mb={2} mt={2}>
            {localization.body.noAssetSelected}
          </Typography>
        </Box>
      )}
    </List>
  );
}