import { Fragment } from "react";

import AddPositionForm from "~/components/simulator/AddPositionForm";
import EditPositionForm from "~/components/simulator/EditPositionForm";

import {
  Divider,
  IconButton,
  List,
  ListDivider,
  ListItem,
  ListItemContent,
  Modal,
  ModalClose,
  Sheet,
  Typography,
  Grid,
  Box,
} from "@mui/joy";
import Image from "next/image";
import { Delete, InfoOutlined } from "@mui/icons-material";
import useLocalization from "~/utils/useLocalization";
import type {
  Position,
  SelectedAsset,
  SetPositions,
} from "~/interfaces/simulator";

const dividerTextSx = { typography: { xs: "body1", md: "h6" } };
const assetTitleSx = {
  typography: { xs: "h5", md: "h4" },
  ml: { xs: 2, md: 0 },
};
const assetNameSx = {
  typography: { xs: "h7", md: "h6" },
  ml: { xs: 2, md: 0 },
};

interface PositionsProps {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  positions: Position[];
  setPositions: SetPositions;
  selectedAsset: SelectedAsset;
}

export default function Positions({
  open,
  setOpen,
  positions,
  setPositions,
  selectedAsset,
}: PositionsProps) {
  const { localization } = useLocalization();

  const modalLeft = window.innerWidth > 500 ? (window.innerWidth - 500) / 2 : 0;

  return (
    <Fragment>
      <Modal
        sx={{
          left: modalLeft,
          overflowY: "scroll",
          justifyContent: "center",
          alignItems: "center",
        }}
        aria-labelledby='modal-title'
        aria-describedby='modal-desc'
        open={open}
        onClose={() => {
          setOpen(false);
        }}
      >
        <Sheet
          variant='outlined'
          sx={{
            maxWidth: 500,
            borderRadius: "md",
            p: 3,
            boxShadow: "lg",
          }}
        >
          <ModalClose variant='outlined' />
          <Grid
            container
            spacing={1}
            direction='row'
            justifyContent='flex-start'
            alignItems='flex-start'
          >
            <Grid xs={2}>
              <Image
                src={selectedAsset.logo ?? ""}
                width={60}
                height={60}
                alt={`${selectedAsset.ticker} logo`}
              />
            </Grid>
            <Grid xs={10}>
              <Typography
                sx={assetTitleSx}
                id='modal-title'
                textColor='inherit'
                fontWeight='lg'
              >
                {selectedAsset.ticker}
              </Typography>
              <Typography
                sx={assetNameSx}
                id='modal-desc'
                textColor='text.tertiary'
              >
                {selectedAsset.name}
              </Typography>
            </Grid>
          </Grid>
          <Divider role='presentation'>
            <Typography sx={dividerTextSx} mb={2} mt={2}>
              {localization.body.assetModal.purchaseGenerator}
            </Typography>
          </Divider>
          <AddPositionForm
            positions={positions}
            setPositions={setPositions}
            selectedAsset={selectedAsset}
          />
          <Divider role='presentation'>
            <Typography sx={dividerTextSx} mb={2} mt={2}>
              {localization.body.assetModal.purchases}
            </Typography>
          </Divider>
          <List
            size='lg'
            sx={{
              "--List-item-paddingX": "0px",
            }}
          >
            {positions.length > 0 &&
            positions.findIndex((pos) => pos.ticker === selectedAsset.ticker) >=
              0 ? (
              <>
                {positions.map((position) => {
                  if (position.ticker === selectedAsset.ticker) {
                    return (
                      <Fragment key={position.id}>
                        <ListItem
                          endAction={
                            <Box mt={2.5}>
                              <IconButton
                                aria-label='Delete'
                                size='sm'
                                color='danger'
                              >
                                <Delete
                                  onClick={() => {
                                    setPositions(
                                      positions.filter(
                                        (currPosition) =>
                                          currPosition.id !== position.id
                                      )
                                    );
                                  }}
                                />
                              </IconButton>
                            </Box>
                          }
                        >
                          <ListItemContent sx={{ fontSize: "sm" }}>
                            <EditPositionForm
                              position={position}
                              positions={positions}
                              setPositions={setPositions}
                              selectedAsset={selectedAsset}
                            />
                          </ListItemContent>
                        </ListItem>
                        <ListDivider />
                      </Fragment>
                    );
                  } else {
                    return null;
                  }
                })}
              </>
            ) : (
              <Box display='flex' justifyContent='center'>
                <Typography
                  sx={dividerTextSx}
                  startDecorator={<InfoOutlined />}
                  mb={2}
                  mt={2}
                >
                  {localization.body.assetModal.noPurchases}
                </Typography>
              </Box>
            )}
          </List>
        </Sheet>
      </Modal>
    </Fragment>
  );
}