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 OrderedListProps = MobiusStyledComponentProps<
    "ol",
    {
        /** CSS string or styled-components function to be injected into this component.
         * @themable */
        css?: StyledProp<OrderedListProps>;
        /**
         * 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 OrderedListStyle = styled.ol<InjectableCss>`
    padding: 0 0 0 40px;
    margin: 1rem 0;
    ol,
    ul {
        margin: 0;
    }
    ${getProp("theme.lists.defaultProps.css")}
    ${getProp("theme.lists.orderedListProps.css")}
    ${injectCss}
`;

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

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

export default OrderedList;
