import { __assign, __read, __rest } from "tslib";
import React, { useState, useEffect } from "react";
import P1 from "../typography/P1";
import { useStateProps } from "../hooks/useStateProps";
import { ClusterStyled } from "./style";
var Cluster = React.forwardRef(function (_a, ref) {
    var className = _a.className, isDisabled = _a.isDisabled, children = _a.children, onClick = _a.onClick, props = __rest(_a, ["className", "isDisabled", "children", "onClick"]);
    var _b = __read(useStateProps(props.isPressed), 2), isPressed = _b[0], setIsPressed = _b[1];
    var _c = __read(useState("phoenix"), 2), textType = _c[0], setTextType = _c[1];
    var handleClick = function (event) {
        setIsPressed(!isPressed);
        onClick === null || onClick === void 0 ? void 0 : onClick(event);
    };
    useEffect(function () {
        if (isDisabled || isPressed) {
            setTextType("cygnus");
        }
        else {
            setTextType("phoenix");
        }
    }, [isPressed, isDisabled]);
    var handleMouseLeave = function () {
        if (!isDisabled && !isPressed) {
            setTextType("phoenix");
        }
    };
    return (React.createElement(ClusterStyled, __assign({ onMouseOver: function () { return setTextType("cygnus"); }, onMouseLeave: handleMouseLeave, className: className, onClick: handleClick, isPressed: isPressed, isDisabled: isDisabled, ref: ref }, props),
        React.createElement(P1, { type: textType }, children)));
});
Cluster.displayName = "Cluster";
export default Cluster;
