import { Box, Button, InputBase, Typography, useTheme } from "@mui/material";
import { styled } from "@mui/material/styles";
import { ReactElement, useRef } from "react";

import GhostStyledIcon from "../Icon/GhostIcon";
import Token from "../Token/Token";

import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

const StyledInputBase = styled(InputBase, { shouldForwardProp: prop => prop !== "inputWidth" })(
    ({ inputWidth, inputFontSize }) => ({
        "& .MuiInputBase-input": {
            padding: 0,
            height: "24px",
        },
        "& input": {
            width: `${inputWidth}` || "136px",
            fontSize: `${inputFontSize}` ||"18px",
            "&[type=number]": {
                MozAppearance: "textfield",
            },
            "&::-webkit-outer-spin-button": {
                WebkitAppearance: "none",
                margin: 0,
            },
            "&::-webkit-inner-spin-button": {
                WebkitAppearance: "none",
                margin: 0,
            },
        },
    }),
);

const SwapCard = ({
    id,
    endString,
    endStringOnClick,
    token,
    placeholder = "0",
    inputType = "number",
    info,
    usdValue,
    tokenOnClick,
    tokenName,
    inputWidth,
    inputFontSize,
    maxWidth = "416px",
    ...props
}) => {
    const theme = useTheme();
    const onClickProps = tokenOnClick ? { onClick: tokenOnClick } : "";
    const ref = useRef(null);
    return (
        <Box
            display="flex"
            flexDirection="column"
            maxWidth={maxWidth}
            sx={{ backgroundColor: theme.colors.gray[750] }}
            borderRadius="12px"
            padding="15px"
            onClick={() => {
                ref.current && ref.current.focus();
            }}
        >
            {(token || tokenName) && (
                <Box display="flex" flexDirection="row">
                    <Box
                        display="inline-flex"
                        sx={{
                            backgroundColor: theme.colors.gray[600],
                            "&:hover": { backgroundColor: tokenOnClick ? theme.colors.gray[500] : theme.colors.gray[600] },
                            cursor: tokenOnClick ? "pointer" : "default",
                        }}
                        borderRadius="6px"
                        paddingX="9px"
                        paddingY="6.5px"
                        alignItems="center"
                        {...onClickProps}
                    >
                        {typeof token === "string" ? <Token name={token} sx={{ fontSize: "21px" }} /> : token}

                        {(typeof token === "string" || tokenName) && (
                            <Typography fontSize="15px" lineHeight="24px" marginLeft="9px">
                                {tokenName ? tokenName : token}
                            </Typography>
                        )}

                        {tokenOnClick && <GhostStyledIcon component={KeyboardArrowDownIcon} sx={{ fontSize: "7px", marginLeft: "10px" }} />}
                    </Box>
                </Box>
            )}
            <Box display="flex" flexDirection="row" marginTop="12px" justifyContent="space-between" alignItems="center">
                <Box display="flex" flexDirection="row" alignItems="center">
                    <StyledInputBase
                        id={id}
                        sx={{
                            color: theme.colors.gray[40],
                            fontWeight: 500,
                            padding: 0,
                            height: "24px",
                            maxWidth: inputWidth || "136px",
                        }}
                        placeholder={placeholder}
                        type={inputType}
                        inputWidth={inputWidth}
                        {...props}
                        inputRef={ref}
                    />
                    {usdValue && (
                        <Box sx={{ color: theme.colors.gray[500] }} fontSize="12px" lineHeight="15px">
                            ≈{usdValue}
                        </Box>
                    )}
                </Box>
                <Box
                    display="flex"
                    flexDirection="row"
                    sx={{ color: theme.colors.gray[90] }}
                    alignItems="center"
                    flexWrap="wrap"
                    justifyContent="flex-end"
                >
                    {info && (
                        <Typography fontSize="12px" lineHeight="24px">
                            {info}
                        </Typography>
                    )}
                    {endString && (
                        <Button
                            variant="text"
                            style={{
                                margin: 0,
                                marginLeft: "6px",
                                minWidth: 0,
                                padding: 0,
                                fontWeight: 450,
                                fontSize: "12px",
                                lineHeight: "12px",
                            }}
                            onClick={endStringOnClick}
                            >
                            {""}
                            {endString}
                        </Button>
                    )}
                </Box>
            </Box>
        </Box>
    );
};

export default SwapCard;