import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import { Decimal } from "https://cdn.skypack.dev/decimal.js@10.3.1";

const INITIAL_VALUE = 10;
const SUGGESTIONS = [1, 0.2, Infinity, NaN, -0, 0.3333333333333333, 8e-323];

function toggleBit(buffer, position) {
    const newValue = buffer.slice(0);
    const bytes = new Uint8Array(newValue);
    const reversePosition = 7 - (position % 8);
    bytes[bytes.byteLength - 1 - Math.floor(position / 8)] ^=
        1 << reversePosition;
    return newValue;
}

function updateFloat(buffer, value) {
    const newValue = buffer.slice(0);
    const floats = new Float64Array(newValue);
    floats[0] = value;
    return newValue;
}

function extractBit(bytes, position) {
    const byte = bytes[bytes.byteLength - 1 - Math.floor(position / 8)];
    const reversePosition = 7 - (position % 8);
    return byte & (1 << reversePosition) ? 1 : 0;
}

function extractBitString(bytes, position, length) {
    let integerString = "";
    for (let i = bytes.byteLength - 1; i >= 0; i--) {
        integerString += bytes[i].toString(2).padStart(8, "0");
    }
    return integerString.slice(position, position + length);
}

function Float() {
    const [buffer, setBuffer] = React.useState(new ArrayBuffer(8));
    const [fractionMode, setFractionMode] = React.useState(false);
    const [showRawSignificand, setShowRawSignificand] = React.useState(false);

    const bytes = new Uint8Array(buffer);
    const floats = new Float64Array(buffer);

    const float = floats[0];
    const floatRepresentation =
        (Object.is(float, -0) ? "-0" : float) +
        (isFinite(float) && fractionMode ? "." : "");

    const significandBitString = extractBitString(bytes, 12, 52);
    let significandFractionRepresentation;
    if (showRawSignificand) {
        significandFractionRepresentation = significandBitString.replace(
            /0+$/,
            ""
        );
    } else {
        const significandFractionDecimal = new Decimal(
            `0b0.${significandBitString}`
        );
        significandFractionRepresentation = significandFractionDecimal.isZero()
            ? "0"
            : significandFractionDecimal
                  .toFixed(21)
                  .slice(2)
                  .replace(/0+$/, "");
    }
    const rawBiasedExponent = parseInt(extractBitString(bytes, 1, 11), 2);
    const biasedExponent = rawBiasedExponent || 1;

    React.useEffect(() => setBuffer(updateFloat(buffer, INITIAL_VALUE)), []);

    return (
        <div className="widget">
            <input
                type="text"
                value={floatRepresentation}
                onChange={(e) => {
                    const { value } = e.target;
                    if (!isNaN(value)) {
                        setFractionMode(value.endsWith("."));
                        setBuffer(updateFloat(buffer, value));
                    }
                }}
            />
            <div className="precision">double precision</div>
            <div className="scientific-notation">
                (-1)^
                <span className="sign">
                    {extractBitString(bytes, 0, 1)}
                </span> *{" "}
                <span
                    className="significand"
                    onClick={() => setShowRawSignificand((state) => !state)}
                    title={`Click to show the significand's ${
                        showRawSignificand
                            ? "decimal representation"
                            : "raw binary value"
                    }`}
                >
                    {rawBiasedExponent ? (
                        <>1</>
                    ) : (
                        <span className="exponent">0</span>
                    )}
                    .
                    <span className="significand-fraction">
                        {significandFractionRepresentation}
                        {showRawSignificand ? <sub>2</sub> : ""}
                    </span>
                </span>{" "}
                * 2^(
                <span className="exponent">{biasedExponent}</span>
                -1023)
            </div>
            <div className="bit-array">
                {Object.keys(Array(64).fill()).map((i) => (
                    <button
                        className={`bit bit--${extractBit(bytes, i)} bit--${
                            i == 0
                                ? "sign"
                                : i < 12
                                ? "exponent"
                                : "significand"
                        }`}
                        type="button"
                        onClick={() => setBuffer(toggleBit(buffer, i))}
                        title={`Bit ${i}`}
                    />
                ))}
            </div>
            <div className="legend">
                <span className="sign">sign</span>
                <span className="exponent">exponent</span>
                <span className="significand">significand/mantissa</span>
            </div>
            <div className="suggestions">
                <i>try these:</i>
                {SUGGESTIONS.map((suggestedValue) => (
                    <>
                        {" "}
                        <button
                            key={suggestedValue}
                            className="shortcut"
                            onClick={() =>
                                setBuffer(updateFloat(buffer, suggestedValue))
                            }
                        >
                            {Object.is(suggestedValue, -0)
                                ? "-0"
                                : suggestedValue}
                        </button>
                    </>
                ))}
            </div>
        </div>
    );
}

ReactDOM.render(<Float />, document.body);