// Generated by purs version 0.13.6
"use strict";
var Color = require("../Color/index.js");
var Control_Applicative = require("../Control.Applicative/index.js");
var Control_Bind = require("../Control.Bind/index.js");
var Data_Eq = require("../Data.Eq/index.js");
var Data_Foldable = require("../Data.Foldable/index.js");
var Data_Interpolate = require("../Data.Interpolate/index.js");
var Data_Maybe = require("../Data.Maybe/index.js");
var Data_Monoid = require("../Data.Monoid/index.js");
var Data_Symbol = require("../Data.Symbol/index.js");
var JSS = require("../JSS/index.js");
var React_Basic = require("../React.Basic/index.js");
var React_Basic_DOM_Generated = require("../React.Basic.DOM.Generated/index.js");
var React_Basic_DOM_Internal = require("../React.Basic.DOM.Internal/index.js");
var React_Basic_Hooks = require("../React.Basic.Hooks/index.js");
var React_Basic_Hooks_Internal = require("../React.Basic.Hooks.Internal/index.js");
var Record = require("../Record/index.js");
var Record_Extra = require("../Record.Extra/index.js");
var Type_Equality = require("../Type.Equality/index.js");
var Yoga_Theme = require("../Yoga.Theme/index.js");
var Yoga_Theme_Styles = require("../Yoga.Theme.Styles/index.js");
var PlainButton = (function () {
    function PlainButton() {

    };
    PlainButton.value = new PlainButton();
    return PlainButton;
})();
var HighlightedButton = (function () {
    function HighlightedButton() {

    };
    HighlightedButton.value = new HighlightedButton();
    return HighlightedButton;
})();
var DisabledButton = (function () {
    function DisabledButton() {

    };
    DisabledButton.value = new DisabledButton();
    return DisabledButton;
})();
var linearGradient = function (elems) {
    return "linear-gradient(" + (Data_Foldable.intercalate(Data_Foldable.foldableArray)(Data_Monoid.monoidString)(",")(elems) + ")");
};
var styles = JSS.jssClasses()(function (v) {
    return {
        buttonContainer: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "background";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "borderRadius";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "boxSizing";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "height";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "margin";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "minWidth";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "padding";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))))))()())({
            padding: "2px",
            background: linearGradient([ "145deg", v.highlightColour, v.highlightColourDark ]),
            borderRadius: "20px",
            height: "40px",
            minWidth: "100px",
            boxSizing: "border-box",
            margin: "2px"
        }),
        "@keyframes gradientBG": JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "0%";
        }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "backgroundPosition";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "100%";
        }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "backgroundPosition";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "50%";
        }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "backgroundPosition";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsNil))))()())({
            "0%": {
                backgroundPosition: "0% 50%"
            },
            "50%": {
                backgroundPosition: "100% 50%"
            },
            "100%": {
                backgroundPosition: "0% 50%"
            }
        }),
        btn: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "&:active";
        }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "background";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "boxShadow";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "&:disabled";
        }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "background";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "border";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "boxShadow";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "textDecoration";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "textDecorationColor";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "&:focus";
        }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "animation";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "background";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "backgroundSize";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "color";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "background";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "border";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "borderRadius";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "color";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "fontFamily";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "height";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "letterSpacing";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "outline";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "padding";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "textTransform";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "width";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))))))))))()())({
            background: linearGradient([ "145deg", v.interfaceColourLightest, v.interfaceColourDarkest ]),
            color: v.highlightColour,
            borderRadius: "20px",
            border: "0",
            width: "100%",
            height: "36px",
            fontFamily: v.textFontFamily,
            padding: "1px 18px 0px 18px",
            letterSpacing: "0.2em",
            textTransform: "uppercase",
            outline: "none",
            "&:focus": {
                background: linearGradient([ "145deg", v.interfaceColourDarker, v.highlightColourDark, v.highlightColour ]),
                color: Data_Maybe.fromMaybe(v.textColour)(Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.highlightColour))(function (hlc) {
                    return Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.highlightColourDark))(function (hlcd) {
                        var bg = (function () {
                            if (v.isLight) {
                                return hlc;
                            };
                            return Color.mix(Color.HSL.value)(hlc)(hlcd)(0.5);
                        })();
                        return Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.textColour))(function (tc) {
                            return Control_Applicative.pure(Data_Maybe.applicativeMaybe)(Color.toHexString(Yoga_Theme.increaseContrast(bg)(tc)));
                        });
                    });
                })),
                backgroundSize: "400% 400%, 100% 100%",
                animation: "$gradientBG 3s ease infinite"
            },
            "&:active": {
                boxShadow: Data_Interpolate.i(Data_Interpolate.interpStringFunction(Data_Interpolate.interpStringFunction(Data_Interpolate.interpStringFunction(Data_Interpolate.interpStringFunction(Data_Interpolate.interpString)))))("inset 6px 6px 6px ")(v.backgroundColourDarkest)(", inset -6px -6px 6px ")(v.backgroundColourLightest),
                background: linearGradient([ "145deg", v.backgroundColourDarker, v.backgroundColourLighter ])
            },
            "&:disabled": {
                boxShadow: "0 0 0 black",
                background: v.backgroundColour,
                border: "1px dotted " + v.interfaceColourLightest,
                textDecoration: "line-through",
                textDecorationColor: v.red
            }
        }),
        highlightedButton: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "&:active";
        }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "background";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "background";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "color";
        }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
            background: (function () {
                if (v.isLight) {
                    return v.highlightColour;
                };
                return linearGradient([ v.highlightColour, v.highlightColourDark ]);
            })(),
            "&:active": {
                background: linearGradient([ "145deg", v.highlightColourDark, v.highlightColour ])
            },
            color: Data_Maybe.fromMaybe(v.textColour)(Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.highlightColour))(function (hlc) {
                return Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.highlightColourDark))(function (hlcd) {
                    var bg = (function () {
                        if (v.isLight) {
                            return hlc;
                        };
                        return Color.mix(Color.HSL.value)(hlc)(hlcd)(0.5);
                    })();
                    return Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.textColour))(function (tc) {
                        return Control_Applicative.pure(Data_Maybe.applicativeMaybe)(Color.toHexString(Yoga_Theme.increaseContrast(bg)(tc)));
                    });
                });
            }))
        })
    };
});
var eqButtonType = new Data_Eq.Eq(function (x) {
    return function (y) {
        if (x instanceof PlainButton && y instanceof PlainButton) {
            return true;
        };
        if (x instanceof HighlightedButton && y instanceof HighlightedButton) {
            return true;
        };
        if (x instanceof DisabledButton && y instanceof DisabledButton) {
            return true;
        };
        return false;
    };
});
var mkButton = function (dictUnion) {
    return function (dictLacks) {
        return function (dictLacks1) {
            return function (dictLacks2) {
                return function __do() {
                    var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                        return "@keyframes gradientBG";
                    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                        return "btn";
                    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                        return "buttonContainer";
                    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                        return "highlightedButton";
                    }))()(Record_Extra.mapRecordNil)()())()())()())()())(styles)();
                    return React_Basic_Hooks.component()()()("Button")(function (v) {
                        return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useStyles({}))(function (classes) {
                            return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic_DOM_Generated.div()({
                                className: classes.buttonContainer,
                                children: [ React_Basic.element(React_Basic_DOM_Internal.unsafeCreateDOMComponent("button"))(Record.union()({
                                    className: classes.btn + (" " + Data_Monoid.guard(Data_Monoid.monoidString)(Data_Eq.eq(eqButtonType)(v.buttonType)(HighlightedButton.value))(classes.highlightedButton)) + (" " + v.className),
                                    disabled: Data_Eq.eq(eqButtonType)(v.buttonType)(DisabledButton.value),
                                    children: v.kids
                                })(v.buttonProps)) ]
                            }));
                        });
                    })();
                };
            };
        };
    };
};
module.exports = {
    PlainButton: PlainButton,
    HighlightedButton: HighlightedButton,
    DisabledButton: DisabledButton,
    styles: styles,
    mkButton: mkButton,
    linearGradient: linearGradient,
    eqButtonType: eqButtonType
};