import { useState } from "react";
import { encodeFunctionData } from 'viem';
import { Box, Typography, TableRow, TableCell, useTheme } from "@mui/material";

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

import { GHOST_GOVERNANCE_ADDRESSES } from "../../../../constants/addresses";
import { abi as GovernorAbi } from "../../../../abi/GhostGovernor.json";

import { ArgumentInput, ParsedCell } from "./index";

export const prepareSetProposalThresholdCalldata = (chainId, newThreshold) => {
    const value = 0n;
    const label = "setProposalThreshold";
    const target = GHOST_GOVERNANCE_ADDRESSES[chainId];
    const calldata = encodeFunctionData({
        abi: GovernorAbi,
        functionName: 'setProposalThreshold',
        args: [newThreshold]
    });
    return { label, target, calldata, value };
}

export const prepareSetProposalThresholdDescription = "updates the minimum amount required to create a proposal. This threshold applies only when there are no Active or Pending proposals; otherwise, a higher threshold is enforced.";

export const SetProposalThresholdParsed = (props) => {
    const [isOpened, setIsOpened] = useState(false);
    return (
        <>
            <Modal
                headerContent={
                    <Box display="flex" justifyContent="center" alignItems="center" gap="15px">
                        <Typography variant="h4">View setProposalThreshold</Typography>
                    </Box>
                }
                open={isOpened}
                onClose={() => setIsOpened(false)}
                maxWidth="460px"
                minHeight="80px"
            >
                <Box minHeight="100px" display="flex" alignItems="start" justifyContent="space-between" flexDirection="column">
                    <SetProposalThresholdSteps {...props} />
                </Box>
            </Modal>
            <ParsedCell isOpened={isOpened} setIsOpened={setIsOpened} {...props} />
        </>
    )
}

export const SetProposalThresholdSteps = ({ chainId, toInitialStep, addCalldata, args }) => {
    const createMode = args === undefined;

    const [newThreshold, setNewThreshold] = useState(args?.at(0));

    const handleProceed = () => {
        addCalldata(prepareSetProposalThresholdCalldata(chainId, newThreshold));
    }

    return (
        <Box height="100%" width="100%" display="flex" flexDirection="column" justifyContent={"space-between"}>
            <ArgumentInput
                disabled={!createMode}
                endString="!CSPR units"
                label="newProposalThreshold"
                value={newThreshold ?? ""}
                setValue={createMode ? setNewThreshold : () => {}}
                tooltip="The new proposal threshold defines the minimum amount each proposer must lock for the duration of the proposal. This locked amount serves as the required deposit to create a proposal."
            />
            {createMode && <Box width="100%" sx={{ marginTop: "20px" }} display="flex" flexDirection="column" gap="5px">
                <Box display="flex" gap="10px">
                    <TertiaryButton onClick={toInitialStep} fullWidth>Back</TertiaryButton>
                    <TertiaryButton disabled fullWidth>Next</TertiaryButton>
                </Box>
                <PrimaryButton
                    disabled={!newThreshold}
                    onClick={() => handleProceed()}
                    fullWidth
                >
                    Create Function
                </PrimaryButton>
            </Box>}
        </Box>
    );
}