import { useState } from "react";
import { Box, Typography } from "@mui/material";
import { styled, useTheme } from "@mui/material/styles";
import SettingsIcon from '@mui/icons-material/Settings';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import toast from "react-hot-toast";

import GhostStyledIcon from "../../../components/Icon/GhostIcon";
import Metric from "../../../components/Metric/Metric";
import Modal from "../../../components/Modal/Modal";
import TokenStack from "../../../components/TokenStack/TokenStack";
import DataRow from "../../../components/DataRow/DataRow";
import { PrimaryButton } from "../../../components/Button";

import BondDiscount from "./BondDiscount";
import BondVesting from "./BondVesting";
import BondSlippage from "./BondSlippage";

import { purchaseBond } from "../../../hooks/bonds";

const StyledBox = styled(Box, {
    shouldForwardProp: prop => prop !== "template",
})(({ theme }) => {
    return {
        root: {},
    };
});

const BondConfirmModal = ({
    chainId,
    bond,
    slippage,
    recipientAddress,
    spendAmountValue,
    spendAmount,
    receiveAmount,
    sender,
    handleSettingsOpen,
    isOpen,
    handleConfirmClose
}) => {
    const theme = useTheme();
    const [isPending, setIsPending] = useState(false);

    const onSubmit = async () => {
        setIsPending(true);

        const shares = 100000;
        const one = BigInt(shares * 100);
        const floatSlippage = slippage === "" ? 0 : parseFloat(slippage);
        const bigIntSlippage = one + BigInt(Math.round(floatSlippage * shares));

        const maxPrice = bond.price.inBaseToken._value * bigIntSlippage / one;
        const referral = import.meta.env.VITE_APP_REFERRAL_ADDRESS;

        await purchaseBond(
            chainId,
            bond.id,
            spendAmountValue._value.toBigInt(),
            maxPrice,
            recipientAddress,
            sender,
            referral
        );

        setIsPending(false);
        handleConfirmClose();
    }

    return (
        <Modal
            maxWidth="476px"
            minHeight="200px"
            open={isOpen}
            headerContent={
                <Box display="flex" flexDirection="row">
                    <TokenStack tokens={bond.quoteToken.icons} sx={{ fontSize: "27px" }} />
                    <Typography variant="h4" sx={{ marginLeft: "6px" }}>
                        {bond.quoteToken.name}
                    </Typography>
                </Box>
            }
            onClose={!isPending && handleConfirmClose}
            topLeft={<GhostStyledIcon viewBox="0 0 23 23" component={SettingsIcon} style={{ cursor: "pointer" }} onClick={handleSettingsOpen} />}
        >
            <>
                <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
                    <Box display="flex" flexDirection="column">
                        <Metric
                            label="Assets to Bond"
                            metric={spendAmount}
                            />
                        <Box display="flex" flexDirection="row" justifyContent="center">
                            <Typography>{bond.quoteToken.name}</Typography>
                        </Box>
                    </Box>
                    <GhostStyledIcon sx={{ transform: "rotate(-90deg)" }} component={ArrowDropDownIcon} />
                    <Box display="flex" flexDirection="column">
                        <Metric label="Assets to Receive" metric={receiveAmount} />
                        <Box display="flex" flexDirection="row" justifyContent="center">
                            <Typography>{bond.baseToken.name}</Typography>
                        </Box>
                    </Box>
                </Box>
                <Box mt="21px" mb="21px" borderTop={`1px solid ${theme.colors.gray[500]}`}></Box>
                <DataRow title="ROI" balance={<BondDiscount discount={bond.discount} textOnly />} />
                <DataRow title="Bond Slippage" balance={<BondSlippage slippage={slippage} textOnly />} />
                <DataRow title="Vesting Term" balance={<BondVesting vesting={bond.vesting} />} />
                <PrimaryButton fullWidth onClick={onSubmit} disabled={isPending} loading={isPending}>
                    {isPending ? "Bonding..." : "Confirm Bond Purchase"}
                </PrimaryButton>
            </>
        </Modal>
    );
};

export default BondConfirmModal;