import classNames from "classnames";
import style from "./Avatar.module.css";
import ReactAvatar from "react-avatar";

export type AvatarSize = "super-small" | "small" | "medium" | "large";
export type AvatarBorder = "solid" | "none";

export interface AvatarProps {
    name?: string;
    src: string;
    alt: string;
    size?: AvatarSize;
    border?: AvatarBorder;
    style?: React.CSSProperties;
    readOnly?: boolean;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
export default function Avatar(props: AvatarProps): React.ReactElement {
    const { readOnly = true, size = "large", border = "solid" } = props;

    const getClassNames = () => {
        if (size === "small") {
            return classNames(
                style.avatarContainer,
                style.avatarSmall,
                border === "none" ? style.avatarBorderNone : style.avatarBorderSolid
            );
        } else if (size === "medium") {
            return classNames(
                style.avatarContainer,
                style.avatarMedium,
                border === "none" ? style.avatarBorderNone : style.avatarBorderSolid
            );
        } else if (size === "large") {
            return classNames(
                style.avatarContainer,
                style.avatarLarge,
                border === "none" ? style.avatarBorderNone : style.avatarBorderSolid
            );
        } else if (size === "super-small") {
            return classNames(
                style.avatarContainer,
                style.avatarSuperSmall,
                border === "none" ? style.avatarBorderNone : style.avatarBorderSolid
            );
        }

        return classNames(
            style.avatarContainer,
            style.avatarLarge,
            border === "none" ? style.avatarBorderNone : style.avatarBorderSolid
        );
    };

    const getPixelSize = (size: AvatarSize): string => {
        switch (size) {
            case "super-small":
                return "32";
            case "small":
                return "48";
            case "medium":
                return "64";
            case "large":
                return "96";
            default:
                return "32";
        }
    };

    const isImageUrl = (url: string): boolean => {
        return url.match(/\.(jpeg|jpg|gif|png|svg)$/) != null;
    };

    return (
        <div className={getClassNames()} style={props.style}>
            {!readOnly && (
                <input
                    id={props.name}
                    name={props.name}
                    accept="image/*;capture=camera"
                    type="file"
                    onChange={props.onChange}
                    style={{ width: "100%", height: "100%", opacity: 0, position: "absolute" }}
                />
            )}
            {isImageUrl(props.src) && <img src={props.src} alt={props.alt} />}
            {!isImageUrl(props.src) && (
                <ReactAvatar
                    name={props.src}
                    size={getPixelSize(size)}
                    round={true}
                    textSizeRatio={2}
                    maxInitials={2}
                />
            )}
        </div>
    );
}
