import { Column, Row, Container, Section, Card, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, } from '@nimles/react-web-components';
import styled from '@emotion/styled';
import { css, jsx } from '@emotion/react';
import { ProductList } from './ProductList';
import { Header } from './Header';
import { Main } from './Main';
import { ShoppingCartMenu } from './ShoppingCartMenu';
import { UserMenu } from './UserMenu';
import { Footer } from './Footer';
import { Routes } from './Routes';
import { ProductGroupsMenu } from './ProductGroupsMenu';
import { Brand } from './Brand';
import { HubSpotForm } from './HubSpotForm';
import { NavButton } from './NavButton';
import { PageList } from './PageList';
import { PostList } from './PostList';
const Image = styled.img `
  max-width: 100%;
`;
const RichTextHtml = styled.div ``;
export const Element = ({ tenant, element, root }) => {
    const styles = !element.styles
        ? ''
        : Object.entries(element.styles)
            .map(([key, value]) => `${key}: ${value};`)
            .join(' ');
    const customCss = css `
    ${styles}
    ${element.css}
  `;
    const props = element.properties || {};
    switch (element.type) {
        case 'Column':
            return (<Column flex css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </Column>);
        case 'Row':
            return (<Row css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </Row>);
        case 'Container':
            return (<Container css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </Container>);
        case 'Section':
            return (<Section css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </Section>);
        case 'Card':
            return (<Card css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </Card>);
        case 'Header':
            return element.children && element.children.length ? (<Header css={customCss} {...props}>
          {element.children
                    ? element.children.map((element) => (<Element key={element.id} tenant={tenant} element={element} root={root}/>))
                    : null}
        </Header>) : (<Header css={customCss} {...props} layoutId={element.content}/>);
        case 'Footer':
            return (<Footer css={customCss} {...props}>
          {element.children
                    ? element.children.map((element) => (<Element key={element.id} tenant={tenant} element={element} root={root}/>))
                    : null}
        </Footer>);
        case 'Main':
            return (<Main css={customCss} {...props}>
          {element.children &&
                    element.children.map((element) => (<Element key={element.id} tenant={tenant} element={element} root={root}/>))}
        </Main>);
        case 'Routes':
            return <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 css={customCss} {...props}>
          {element.content}
        </NavButton>);
        case 'ProductList':
            return <ProductList css={customCss} {...props}/>;
        case 'ShoppingCartMenu':
            return <ShoppingCartMenu css={customCss} {...props}/>;
        case 'ProductGroupsMenu':
            return <ProductGroupsMenu css={customCss} {...props}/>;
        case 'UserMenu':
            return <UserMenu css={customCss} {...props}/>;
        case 'Brand':
            return <Brand css={customCss} {...props}/>;
        case 'Heading1':
            return (<Heading1 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </Heading1>);
        case 'Heading2':
            return (<Heading2 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </Heading2>);
        case 'Heading3':
            return (<Heading3 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </Heading3>);
        case 'Heading4':
            return (<Heading4 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </Heading4>);
        case 'Heading5':
            return (<Heading5 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </Heading5>);
        case 'Heading6':
            return (<Heading6 inheritColor={root === 'Footer' || root === 'Header'} css={customCss} {...props}>
          {element.content}
        </Heading6>);
        case 'HubSpotForm':
            return <HubSpotForm css={customCss} {...props}/>;
        case 'PageList':
            return (<PageList css={customCss} style={root === 'Footer' || root === 'Header' ? 'menu' : 'list'} {...props}/>);
        case 'PostList':
            return (<PostList css={customCss} style={root === 'Footer' || root === 'Header' ? 'menu' : 'list'} {...props}/>);
        default:
            return null;
    }
};
//# sourceMappingURL=Element.jsx.map