import Metric from "../../../components/Metric/Metric";

import { formatCurrency, formatNumber } from "../../../helpers";
import { DecimalBigNumber } from "../../../helpers/DecimalBigNumber";
import { getTokenDecimals } from "../../../hooks/helpers";
import { useTotalSupply } from "../../../hooks/tokens";
import {
    useMinQuorum,
    useProposalThreshold,
    useProposalCount
} from "../../../hooks/governance";

export const MinQuorumPercentage = props => {
    const { numerator, denominator, percentage } = useMinQuorum(props.chainId);
    const { totalSupply } = useTotalSupply(props.chainId, "GHST");
    const decimals = getTokenDecimals(props.ghstSymbol);

    const value = new DecimalBigNumber(
        (totalSupply?._value ?? 0n) * numerator / denominator,
        decimals
    );

    const _props = {
        ...props,
        label: `Min Quorum`,
        tooltip: `Minimum $${props.ghstSymbol} turnout required for the proposal to become valid`,
    };

    if (percentage) _props.metric = `${formatCurrency(value?.toString(), 2, props.ghstSymbol)} (${formatNumber(percentage * 100, 2)}%)`;
    else _props.isLoading = true;

    return <Metric {..._props} />;
};

export const ProposalThreshold = props => {
    const { threshold } = useProposalThreshold(props.chainId, props.ghstSymbol);

    const _props = {
        ...props,
        label: `$${props.ghstSymbol} Threshold`,
        tooltip: `Minimum $${props.ghstSymbol} required to be locked to create a proposal`,
    };

    if (threshold) _props.metric = `${formatCurrency(threshold.toString(), 0, props.ghstSymbol)}`;
    else _props.isLoading = true;

    return <Metric {..._props} />;
}

export const ProposalsCount = props => {
    const { proposalsCount } = useProposalCount(props.chainId);

    const _props = {
        ...props,
        label: `Proposals Count`,
        tooltip: `Total proposals created`,
    };

    if (proposalsCount) _props.metric = proposalsCount.toString();
    else _props.isLoading = true;

    return <Metric {..._props} />;
}
