"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Element = void 0;
const react_web_components_1 = require("@nimles/react-web-components");
const styled_1 = __importDefault(require("@emotion/styled"));
const react_1 = require("@emotion/react");
const ProductList_1 = require("./ProductList");
const Header_1 = require("./Header");
const Main_1 = require("./Main");
const ShoppingCartMenu_1 = require("./ShoppingCartMenu");
const UserMenu_1 = require("./UserMenu");
const Footer_1 = require("./Footer");
const Routes_1 = require("./Routes");
const ProductGroupsMenu_1 = require("./ProductGroupsMenu");
const Brand_1 = require("./Brand");
const HubSpotForm_1 = require("./HubSpotForm");
const NavButton_1 = require("./NavButton");
const PageList_1 = require("./PageList");
const PostList_1 = require("./PostList");
const Image = styled_1.default.img `
  max-width: 100%;
`;
const RichTextHtml = styled_1.default.div ``;
const Element = ({ tenant, element, root }) => {
    const styles = !element.styles
        ? ''
        : Object.entries(element.styles)
            .map(([key, value]) => `${key}: ${value};`)
            .join(' ');
    const customCss = (0, react_1.css) `
    ${styles}
    ${element.css}
  `;
    const props = element.properties || {};
    switch (element.type) {
        case 'Column':
            return (<react_web_components_1.Column flex css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<exports.Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </react_web_components_1.Column>);
        case 'Row':
            return (<react_web_components_1.Row css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<exports.Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </react_web_components_1.Row>);
        case 'Container':
            return (<react_web_components_1.Container css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<exports.Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </react_web_components_1.Container>);
        case 'Section':
            return (<react_web_components_1.Section css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<exports.Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </react_web_components_1.Section>);
        case 'Card':
            return (<react_web_components_1.Card css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<exports.Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </react_web_components_1.Card>);
        case 'Header':
            return element.children && element.children.length ? (<Header_1.Header css={customCss} {...props}>
          {element.children
                    ? element.children.map((element) => (<exports.Element key={element.id} tenant={tenant} element={element} root={root}/>))
                    : null}
        </Header_1.Header>) : (<Header_1.Header css={customCss} {...props} layoutId={element.content}/>);
        case 'Footer':
            return (<Footer_1.Footer css={customCss} {...props}>
          {element.children
                    ? element.children.map((element) => (<exports.Element key={element.id} tenant={tenant} element={element} root={root}/>))
                    : null}
        </Footer_1.Footer>);
        case 'Main':
            return (<Main_1.Main css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<exports.Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </Main_1.Main>);
        case 'Routes':
            return <Routes_1.Routes css={customCss} {...props}/>;
        case 'Text':
            return (<div css={customCss} {...props}>
          {element.content}
        </div>);
        case 'RichTextHtml':
        case 'Html':
            return (<RichTextHtml css={customCss} dangerouslySetInnerHTML={{ __html: element.content }}/>);
        case 'Image':
            return (<Image css={customCss} {...props} src={`https://media.nimles.com/file/${tenant.id}/${element.content}?width=860`}/>);
        case 'NavButton':
            return (<NavButton_1.NavButton css={customCss} {...props}>
          {element.content}
        </NavButton_1.NavButton>);
        case 'ProductList':
            return <ProductList_1.ProductList css={customCss} {...props}/>;
        case 'ShoppingCartMenu':
            return <ShoppingCartMenu_1.ShoppingCartMenu css={customCss} {...props}/>;
        case 'ProductGroupsMenu':
            return <ProductGroupsMenu_1.ProductGroupsMenu css={customCss} {...props}/>;
        case 'UserMenu':
            return <UserMenu_1.UserMenu css={customCss} {...props}/>;
        case 'Brand':
            return <Brand_1.Brand css={customCss} {...props}/>;
        case 'Heading1':
            return (<react_web_components_1.Heading1 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </react_web_components_1.Heading1>);
        case 'Heading2':
            return (<react_web_components_1.Heading2 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </react_web_components_1.Heading2>);
        case 'Heading3':
            return (<react_web_components_1.Heading3 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </react_web_components_1.Heading3>);
        case 'Heading4':
            return (<react_web_components_1.Heading4 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </react_web_components_1.Heading4>);
        case 'Heading5':
            return (<react_web_components_1.Heading5 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </react_web_components_1.Heading5>);
        case 'Heading6':
            return (<react_web_components_1.Heading6 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </react_web_components_1.Heading6>);
        case 'HubSpotForm':
            return <HubSpotForm_1.HubSpotForm css={customCss} {...props}/>;
        case 'PageList':
            return (<PageList_1.PageList css={customCss} style={root === 'Footer' || root === 'Header' ? 'menu' : 'list'} {...props}/>);
        case 'PostList':
            return (<PostList_1.PostList css={customCss} style={root === 'Footer' || root === 'Header' ? 'menu' : 'list'} {...props}/>);
        default:
            return null;
    }
};
exports.Element = Element;
//# sourceMappingURL=Element.jsx.map