import { Row, Column, Card, CardBody, List, ListItem, } from "@nimles/react-web-components";
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import styled from "@emotion/styled";
import { loadPublicPages, useAppDispatch } from "@nimles/react-redux";
import { NavLink } from "./Link";
const Name = styled.h2 `
  font-size: 16px;
  margin-top: 0;
  font-size: 500;
  flex: 1 0 auto;
`;
const CardLink = styled(NavLink) `
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
`;
const InheritLink = styled(NavLink) `
  color: inherit;
`;
export const PageList = ({ organizationId, start, limit, order, style, includeFirstPage, }) => {
    const dispatch = useAppDispatch();
    let pages = useSelector(({ publicPages }) => publicPages.values);
    useEffect(() => {
        dispatch(loadPublicPages({ start, limit, order, organizationId }));
    }, [start, limit, order, organizationId]);
    if (!includeFirstPage) {
        pages = pages.filter((p) => p.pageType !== "FirstPage");
    }
    style = style && style.toLowerCase();
    switch (style) {
        case "cards":
            return (<Row wrap>
          {pages.map((page) => (<Column key={page.id} padding xs={100}>
              <Card flex="1 0 auto">
                <CardLink to={`/${page.uniqueName}/pt`}>
                  <CardBody>
                    <Name>{page.title}</Name>
                  </CardBody>
                </CardLink>
              </Card>
            </Column>))}
        </Row>);
        case "list":
            return (<List>
          {pages.map((page) => (<ListItem key={page.id}>
              <NavLink to={`/${page.uniqueName}/pt`}>{page.title}</NavLink>
            </ListItem>))}
        </List>);
        case "menu":
            return (<List>
          {pages.map((page) => (<ListItem key={page.id} inheritColors>
              <InheritLink to={`/${page.uniqueName}/pt`}>
                {page.title}
              </InheritLink>
            </ListItem>))}
        </List>);
        default:
            return (<List>
          {pages.map((page) => (<ListItem key={page.id}>
              <NavLink to={`/${page.uniqueName}/pt`}>{page.title}</NavLink>
            </ListItem>))}
        </List>);
    }
};
//# sourceMappingURL=PageList.jsx.map