import LazyImage, { LazyImagePresentationProps } from "@insite/mobius/LazyImage";
import Typography from "@insite/mobius/Typography";
import InjectableCss, { StyledProp } from "@insite/mobius/utilities/InjectableCss";
import * as React from "react";
import styled from "styled-components";

export enum BadgeTypeValues {
    Image = "Image",
    Text = "Text",
}

export interface BadgePresentationProps {
    textBadgeCss?: InjectableCss;
    imageBadgeProps?: JSX.IntrinsicElements["img"];
}

const TextBadge = styled.div<{ backgroundColor: string; color: string; badgeTextRounding: number }>`
    text-align: center;
    padding: 5px;
    background-color: #${props => props.backgroundColor};
    color: #${props => props.color};
    border-radius: ${props => props.badgeTextRounding}px;
`;

export type BadgeProps = {
    /** When type is Image an img tag will be rendered with the src being the value prop.
     * When the type is text a textbox will be rendered with the given value used as text and color scheme
     * denoted in badgeTextColor and badgeBackgroundColor
     * When no type is given or no corresponding value is given, nothing will render.
     */
    type: BadgeTypeValues;
    /** URL image path or badge text */
    value?: string;
    /** Alt text for the image badge */
    imageAltText?: string;
    /** Hex code for badge text color
     * Default is white (FFFFFF)
     */
    badgeTextColor?: string;
    /** Hex code for badge background color
     * Default is black (000000)
     */
    badgeBackgroundColor?: string;
    /** Number used to determine border radius for text badge in pixels
     * Default is 0
     */
    badgeTextRounding?: number;
} & BadgePresentationProps;

const Badge = ({
    type,
    value,
    imageAltText,
    badgeTextColor,
    badgeBackgroundColor,
    badgeTextRounding,
    imageBadgeProps,
    textBadgeCss,
}: BadgeProps) => {
    if (!type || !value) {
        return null;
    }

    if (type === BadgeTypeValues.Image) {
        return <LazyImage imgProps={imageBadgeProps} src={value} altText={imageAltText} />;
    }

    if (type === BadgeTypeValues.Text) {
        return (
            <TextBadge
                backgroundColor={badgeBackgroundColor || "000000"}
                color={badgeTextColor || "FFFFFF"}
                badgeTextRounding={badgeTextRounding || 0}
            >
                <Typography {...textBadgeCss}>{value}</Typography>
            </TextBadge>
        );
    }

    return <>Unknown badge type</>;
};

/** @component */
export default Badge;
