import { Avatar, Box, Dialog, Link, List, ListItem, ListItemText, Typography } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import CloseIcon from '@mui/icons-material/Close';
import GhostStyledIcon from "../../../components/Icon/GhostIcon";
import Token from "../../../components/Token/Token";

const TokenModal = ({
    open,
    handleSelect,
    handleClose,
    ftsoBalance = "0.00",
    stnkBalance = "0.00",
    ghstBalance = "0.00",
    tokenToExclude,
    isUpper,
    ftsoSymbol,
    stnkSymbol,
    ghstSymbol
}) => {
    const theme = useTheme();

    const TokenItem = ({ token, name, exclude, isUpper, balance = "0", icon, address = "", price, decimals, ...props }) => {
        if (name === exclude) {
            return <></>;
        }

        return (
            <ListItem
                key={token}
                button="true"
                onClick={() => {
                    handleSelect({token, isUpper});
                    handleClose();
                }}
                sx={{ borderBottom: `1px solid ${theme.colors.gray[500]}` }}
                {...props}
            >
                {icon ? (
                    <Avatar src={icon} sx={{ width: "15px", height: "15px" }} />
                ) : (
                    <Token name={token} sx={{ fontSize: "15px" }} />
                )}

                <ListItemText
                    primaryTypographyProps={{
                        sx: { marginLeft: "6px", fontWeight: 500, lineHeight: "24px", fontSize: "15px" },
                    }}
                    primary={name}
                />
                <Box flexGrow={10} />
                <ListItemText
                    style={{ display: "flex", flexDirection: "column", alignItems: "flex-end" }}
                    secondaryTypographyProps={{ sx: { fontSize: "12px", lineHeight: "15px" } }}
                    secondary={balance}
                />
            </ListItem>
        );
    };

    return (
        <Dialog open={open} fullWidth maxWidth="xs" PaperProps={{ sx: { borderRadius: "9px" } }} onClose={handleClose}>
            <Box paddingX="15px" paddingTop="22.5px" paddingBottom="15px">
                <Box display="flex" flexDirection="row" justifyContent="space-between">
                    <Typography id="migration-modal-title" variant="h6" component="h2">
                        {`Select a token`}
                    </Typography>
                    <Link>
                        <GhostStyledIcon component={CloseIcon} onClick={handleClose} sx={{ fontSize: "19px" }} />
                    </Link>
                </Box>
                <List>
                    {<TokenItem isUpper={isUpper} exclude={tokenToExclude} token="FTSO" name={ftsoSymbol} balance={ftsoBalance} />}
                    {<TokenItem isUpper={isUpper} exclude={tokenToExclude} token="STNK" name={stnkSymbol} balance={stnkBalance} />}
                    {<TokenItem isUpper={isUpper} exclude={tokenToExclude} token="GHST" name={ghstSymbol} balance={ghstBalance} />}
                </List>
            </Box>
        </Dialog>
    );
};

export default TokenModal;