import { useState } from "react";
import { Box, Typography, FormControlLabel, Checkbox } from "@mui/material";
import { styled, useTheme } from "@mui/material/styles";
import SettingsIcon from '@mui/icons-material/Settings';
import { CheckBoxOutlineBlank, CheckBoxOutlined } from "@mui/icons-material";

import Modal from "../../../components/Modal/Modal";
import { PrimaryButton } from "../../../components/Button";

import { DecimalBigNumber } from "../../../helpers/DecimalBigNumber";
import { formatNumber } from "../../../helpers";

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

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

const WarmupConfirmModal = ({
    chainId,
    address,
    warmupLength,
    isOpen,
    handleConfirmClose,
    setPreClaimConfirmed
}) => {
    const theme = useTheme();

    const [isChecked, setIsChecked] = useState(false);

    const onSubmit = () => {
        setPreClaimConfirmed();
        handleConfirmClose();
    }

    return (
        <Modal
            maxWidth="476px"
            minHeight="150px"
            open={isOpen}
            headerText={
                warmupLength < 0
                    ? "Bond Notification"
                    : "Bond in Warm-up"
            }
            onClose={handleConfirmClose}
        >
            <Box gap="20px" display="flex" flexDirection="column" justifyContent="space-between" alignItems="center">
                <Box display="flex" flexDirection="column">
                    {warmupLength < 0
                        ? <FormControlLabel
                            control={
                                <Checkbox
                                    data-testid="acknowledge-warmup"
                                    checked={isChecked}
                                    onChange={event => setIsChecked(event.target.checked)}
                                    icon={<CheckBoxOutlineBlank viewBox="0 0 24 24" />}
                                    checkedIcon={<CheckBoxOutlined viewBox="0 0 24 24" />}
                                />
                            }
                            label={`I acknowledge that I am releasing warmup funds for the bonding contract on behalf of the collective.`}
                        />
                        : `Bonding address is in a warm-up period and cannot be claimed now. It'll be available for claim in ${warmupLength} epochs.`
                    }
                </Box>

                {warmupLength < 0 && <PrimaryButton fullWidth disabled={!isChecked} onClick={onSubmit}>
                    Confirm
                </PrimaryButton>}
            </Box>
        </Modal>
    );
};

export default WarmupConfirmModal;