// Generated by purs version 0.13.6
"use strict";
var Container_Header = require("../Container.Header/index.js");
var Container_Landing = require("../Container.Landing/index.js");
var Container_Sidebar = require("../Container.Sidebar/index.js");
var Control_Applicative = require("../Control.Applicative/index.js");
var Control_Bind = require("../Control.Bind/index.js");
var Data_Nullable = require("../Data.Nullable/index.js");
var Data_Semigroup = require("../Data.Semigroup/index.js");
var Data_Symbol = require("../Data.Symbol/index.js");
var Effect = require("../Effect/index.js");
var JSS = require("../JSS/index.js");
var Milkis_Impl_Window = require("../Milkis.Impl.Window/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 Yoga_CompileEditor_Component = require("../Yoga.CompileEditor.Component/index.js");
var Yoga_Polyfill_SmoothScrolling = require("../Yoga.Polyfill.SmoothScrolling/index.js");
var Yoga_SVG_Icon = require("../Yoga.SVG.Icon/index.js");
var Yoga_Theme_Provider = require("../Yoga.Theme.Provider/index.js");
var Yoga_Theme_Styles = require("../Yoga.Theme.Styles/index.js");
var initialCode = "module Main where\x0a\x0aimport Batteries\x0a\x0amain :: Effect Unit\x0amain = log \"Let's do this!\"";
var mkContainerContent = Control_Bind.discard(Control_Bind.discardUnit)(Effect.bindEffect)(Yoga_Polyfill_SmoothScrolling.smoothScrollPolyfill)(function ($dollar__unused) {
    return function __do() {
        var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "container";
        }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "content";
        }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
            return "icon";
        }))()(Record_Extra.mapRecordNil)()())()())()())(JSS.jssClasses()(function (v) {
            return {
                container: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                    return "color";
                }))(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 "flexDirection";
                }))(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 "minHeight";
                }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                    return "width";
                }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))()())({
                    fontFamily: v.textFontFamily,
                    color: v.textColour,
                    display: "flex",
                    flexDirection: "column",
                    width: "100%",
                    minHeight: "200%"
                }),
                content: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                    return "backgroundColor";
                }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                    return "minHeight";
                }))(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 "paddingLeft";
                }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                    return "zIndex";
                }))(JSS.jssAbleInt)()()()(JSS.jssAbleFieldsNil))))))()())({
                    backgroundColor: v.backgroundColour,
                    padding: "20px",
                    minHeight: "calc(100vh - 40px)",
                    paddingLeft: "100px",
                    zIndex: 0
                }),
                icon: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                    return "fill";
                }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())({
                    fill: "theme.textColour"
                })
            };
        }))();
        var landingPage = Container_Landing.mkLandingPage();
        var sidebar = Container_Sidebar.mkSidebar();
        var header = Container_Header.mkHeader();
        var sidebarLink = Container_Sidebar.mkSidebarLink();
        var editor = Yoga_CompileEditor_Component.mkCompileEditor(Milkis_Impl_Window.windowFetch)();
        return React_Basic_Hooks.component()()()("ContainerContent")(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)(React_Basic_Hooks.useState(true))(function (v1) {
                    return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(React_Basic_Hooks.useRef(Data_Nullable["null"]))(function (editorRef) {
                        return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic_DOM_Generated.div()({
                            className: classes.container,
                            children: [ React_Basic.element(landingPage)({}), React_Basic.element(sidebar)({
                                collapsed: v1.value0,
                                modifyCollapsed: v1.value1,
                                kids: [ React_Basic.element(sidebarLink)({
                                    name: "Learn",
                                    icon: React_Basic.element(Yoga_SVG_Icon.appendIcon())({}),
                                    collapsed: v1.value0
                                }), React_Basic.element(sidebarLink)({
                                    name: "Try",
                                    icon: React_Basic.element(Yoga_SVG_Icon.bindIcon())({}),
                                    collapsed: v1.value0
                                }), React_Basic.element(sidebarLink)({
                                    name: "Share",
                                    icon: React_Basic.element(Yoga_SVG_Icon.applyflippedIcon())({}),
                                    collapsed: v1.value0
                                }), React_Basic.element(sidebarLink)({
                                    name: "Jobs",
                                    icon: React_Basic.element(Yoga_SVG_Icon.mapIcon())({}),
                                    collapsed: v1.value0
                                }) ]
                            }), React_Basic_DOM_Generated.div()({
                                className: classes.content,
                                children: Data_Semigroup.append(Data_Semigroup.semigroupArray)([ React_Basic.element(editor)({
                                    initialCode: initialCode,
                                    height: "50vh",
                                    language: "purescript"
                                }) ])(v.kids)
                            }) ]
                        }));
                    });
                });
            });
        })();
    };
});
var mkContainer = function __do() {
    var themeProvider = Yoga_Theme_Provider.mkThemeProvider();
    var containerContent = mkContainerContent();
    return React_Basic_Hooks.component()()()("Container")(function (v) {
        return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic.element(themeProvider)({
            theme: v.theme,
            children: [ React_Basic.element(containerContent)({
                kids: v.kids
            }) ]
        }));
    })();
};
module.exports = {
    mkContainer: mkContainer,
    mkContainerContent: mkContainerContent,
    initialCode: initialCode
};