import { getProp } from "@insite/mobius/utilities";
import applyPropBuilder from "@insite/mobius/utilities/applyPropBuilder";
import InjectableCss, { StyledProp } from "@insite/mobius/utilities/InjectableCss";
import injectCss from "@insite/mobius/utilities/injectCss";
import MobiusStyledComponentProps from "@insite/mobius/utilities/MobiusStyledComponentProps";
import * as React from "react";
import styled, { withTheme } from "styled-components";

export type ListItemProps = MobiusStyledComponentProps<
    "li",
    {
        /** CSS string or styled-components function to be injected into this component.
         * @themable */
        css?: StyledProp<ListItemProps>;
        /**
         * Indicates how the `css` property is combined with the variant `css` property from the theme.
         * If true, the variant css is applied first and then the component css is applied after causing
         * a merge, much like normal CSS. If false, only the component css is applied, overriding the variant css in the theme.
         */
        mergeCss?: boolean;
    }
>;

const ListItemStyle = styled.li<InjectableCss>`
    ${getProp("theme.lists.defaultProps.css")}
    ${getProp("theme.lists.listItemProps.css")}
    ${injectCss}
`;

export const ListItem: React.FC<ListItemProps> = withTheme(props => {
    const { children, mergeCss, theme, ...otherProps } = props;
    const { applyStyledProp } = applyPropBuilder(props, { component: "listItem" });
    const resolvedMergeCss = mergeCss ?? otherProps?.theme?.listItem?.defaultProps?.mergeCss;

    return (
        <ListItemStyle css={applyStyledProp("css", resolvedMergeCss)} {...otherProps}>
            {children}
        </ListItemStyle>
    );
});

export default ListItem;
