// Generated by purs version 0.13.6
"use strict";
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_Function = require("../Data.Function/index.js");
var Data_Functor = require("../Data.Functor/index.js");
var Data_Int = require("../Data.Int/index.js");
var Data_Maybe = require("../Data.Maybe/index.js");
var Data_Monoid = require("../Data.Monoid/index.js");
var Data_Newtype = require("../Data.Newtype/index.js");
var Data_Nullable = require("../Data.Nullable/index.js");
var Data_Symbol = require("../Data.Symbol/index.js");
var Data_Tuple = require("../Data.Tuple/index.js");
var Data_Unit = require("../Data.Unit/index.js");
var Effect = require("../Effect/index.js");
var Effect_Class = require("../Effect.Class/index.js");
var Effect_Class_Console = require("../Effect.Class.Console/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_Hooks = require("../React.Basic.Hooks/index.js");
var React_Basic_Hooks_Internal = require("../React.Basic.Hooks.Internal/index.js");
var Record_Extra = require("../Record.Extra/index.js");
var Type_Equality = require("../Type.Equality/index.js");
var Web_Event_EventTarget = require("../Web.Event.EventTarget/index.js");
var Web_HTML = require("../Web.HTML/index.js");
var Web_HTML_HTMLElement = require("../Web.HTML.HTMLElement/index.js");
var Web_HTML_Window = require("../Web.HTML.Window/index.js");
var Yoga_SVG_Icon = require("../Yoga.SVG.Icon/index.js");
var Yoga_Scroll_Listener = require("../Yoga.Scroll.Listener/index.js");
var Yoga_Theme_Styles = require("../Yoga.Theme.Styles/index.js");
var Yoga_Typography_Header = require("../Yoga.Typography.Header/index.js");
var UseShouldBeSticky = function (x) {
    return x;
};
var ntUseShouldBeSticky = new Data_Newtype.Newtype(function (n) {
    return n;
}, UseShouldBeSticky);
var makeListener = function (setSticky) {
    return function (element) {
        return function __do() {
            var nodeStartPos = Web_HTML_HTMLElement.offsetTop(element)();
            return Web_Event_EventTarget.eventListener(Data_Function["const"](function __do() {
                var yPos = Data_Functor.mapFlipped(Effect.functorEffect)(Control_Bind.bind(Effect.bindEffect)(Web_HTML.window)(Web_HTML_Window.scrollY))(Data_Int.toNumber)();
                return setSticky(nodeStartPos < yPos)();
            }))();
        };
    };
};
var useShouldBeSticky = React_Basic_Hooks_Internal.coerceHook(ntUseShouldBeSticky)(React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(React_Basic_Hooks.useRef(Data_Nullable["null"]))(function (nodeRef) {
    return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(React_Basic_Hooks.useState(false))(function (v) {
        var setSticky = function ($64) {
            return v.value1(Data_Function["const"]($64));
        };
        return React_Basic_Hooks_Internal.discard(React_Basic_Hooks_Internal.ixBindRender)(React_Basic_Hooks.useLayoutEffect(Data_Eq.eqUnit)(Data_Unit.unit)(function __do() {
            var maybeNode = React_Basic_Hooks.readRefMaybe(nodeRef)();
            var v1 = Control_Bind.bind(Data_Maybe.bindMaybe)(maybeNode)(Web_HTML_HTMLElement.fromNode);
            if (v1 instanceof Data_Maybe.Nothing) {
                return Control_Bind.discard(Control_Bind.discardUnit)(Effect.bindEffect)(Effect_Class_Console.log(Effect_Class.monadEffectEffect)("Could not register listener because there was no node"))(function ($dollar__unused) {
                    return Control_Applicative.pure(Effect.applicativeEffect)(Control_Applicative.pure(Effect.applicativeEffect)(Data_Unit.unit));
                })();
            };
            if (v1 instanceof Data_Maybe.Just) {
                var listener = makeListener(setSticky)(v1.value0)();
                return Yoga_Scroll_Listener.registerListener(listener)();
            };
            throw new Error("Failed pattern match at Container.Header (line 85, column 7 - line 91, column 43): " + [ v1.constructor.name ]);
        }))(function ($dollar__unused) {
            return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(new Data_Tuple.Tuple(v.value0, nodeRef));
        });
    });
}));
var mkHeader = function __do() {
    var h = Yoga_Typography_Header.mkH();
    var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "header";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "logo";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "sticky";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "title";
    }))()(Record_Extra.mapRecordNil)()())()())()())()())(JSS.jssClasses()(function (v) {
        return {
            header: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "alignItems";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "backgroundColor";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "borderBottom";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "display";
            }))(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 "gridArea";
            }))(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 "justifyContent";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "paddingBottom";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "paddingTop";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))))))))))()())({
                backgroundColor: v.interfaceColour,
                borderBottom: "0",
                fontFamily: v.headingFontFamily,
                gridArea: "header",
                display: "flex",
                alignItems: "center",
                justifyContent: "flex-end",
                width: "100%",
                height: "80px",
                paddingTop: "10px",
                paddingBottom: "10px"
            }),
            sticky: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "position";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "top";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "zIndex";
            }))(JSS.jssAbleInt)()()()(JSS.jssAbleFieldsNil))))()())({
                position: "fixed",
                top: "0",
                zIndex: 10
            }),
            title: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "paddingRight";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())({
                paddingRight: "30px"
            }),
            logo: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(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 "marginRight";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "marginTop";
            }))(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 "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))()())({
                width: "70px",
                height: "70px",
                padding: "5px",
                marginTop: "9px",
                marginRight: "7px",
                fill: v.textColour
            })
        };
    }))();
    return React_Basic_Hooks.component()()()("Header")(function (v) {
        return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useStyles({}))(function (classes) {
            return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useShouldBeSticky)(function (v1) {
                return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic_DOM_Generated.header()({
                    ref: v1.value1,
                    className: classes.header + (" " + Data_Monoid.guard(Data_Monoid.monoidString)(v1.value0)(classes.sticky)),
                    children: [ React_Basic.element(h)({
                        level: Yoga_Typography_Header.H2.value,
                        text: "Rowtype Yoga",
                        className: new Data_Maybe.Just(classes.title)
                    }), React_Basic_DOM_Generated.div()({
                        children: [ React_Basic.element(Yoga_SVG_Icon.trianglelogoIcon())({}) ],
                        className: classes.logo
                    }) ]
                }));
            });
        });
    })();
};
module.exports = {
    mkHeader: mkHeader,
    UseShouldBeSticky: UseShouldBeSticky,
    useShouldBeSticky: useShouldBeSticky,
    makeListener: makeListener,
    ntUseShouldBeSticky: ntUseShouldBeSticky
};