import React, { ReactNode } from "react";
import styled, { css } from "styled-components";
import { Initials } from "./Initials";

const Image = styled.img`
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
`;

const ImgWrap = styled.div`
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: flex;
    align-items: center;
    background: radial-gradient(#ffffff1a -112%,#000000 100%);
    .highlight-one {
        position: absolute;
        z-index: 4;
        top: 7px;
        left: 12px;
        width: 1px;
        height: 1px;
        background: white;
        border-radius: 50%;
        transform: rotate(30deg);
        filter: blur(1px);
    }
    .highlight-two {
        position: absolute;
        z-index: 4;
        top: 20px;
        left: 10px;
        width: 2px;
        height: 2px;
        background: white;
        border-radius: 50%;
        transform: rotate(50deg);
        filter: blur(1px);
    }
`;

const EffectWrap = styled.div`
    .highlight-one {
        position: absolute;
        z-index: 4;
        top: 7px;
        left: 12px;
        width: 2px;
        height: 2px;
        background: white;
        border-radius: 50%;
        transform: rotate(30deg);
        filter: blur(1px);
    }
    .highlight-two {
        position: absolute;
        z-index: 4;
        top: 20px;
        left: 10px;
        width: 2px;
        height: 2px;
        background: white;
        border-radius: 50%;
        transform: rotate(50deg);
        filter: blur(1px);
    }
`;

const SetIcon = styled.img`
    display: flex;
    margin: auto;
    width: 18px;
    height: 18px;
`;

const ArrowIcon = styled.img`
    display: flex;
    margin: auto;
    width: 10px;
    height: 20px;
`;

const FallbackBase = styled.div`
    width: 100%;
    height: 100%;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 600;
    font-size: 0.75rem;
    color: var(--foreground);
    background: radial-gradient(#ffffff1a -112%,#000000 100%);
`;

const ParentBase = styled.svg<Pick<Props, "interactive">>`
    user-select: none;
    box-shadow: 5px 10px 6px #161414;
    border-radius: 50%;
    overflow: visible;

    foreignObject {
        transition: 150ms ease filter;
    }

    ${(props) =>
        props.interactive &&
        css`
            cursor: pointer;

            &:hover foreignObject {
                filter: brightness(0.8);
            }
        `}
`;

export type Props = {
    /**
     * Avatar size
     */
    size?: number;

    /**
     * Image source
     */
    src?: string;

    /**
     * Fallback if no source
     */
    fallback?: string | ReactNode;

    /**
     * Punch a hole through the avatar
     */
    holepunch?: "bottom-right" | "top-right" | "right" | "none" | false;

    /**
     * Specify overlay component
     */
    overlay?: ReactNode;

    /**
     * Whether this icon is interactive
     */
    interactive?: boolean;
    arrow?: boolean;
};

/**
 * Generic Avatar component
 *
 * Partially inspired by Adw.Avatar API, we allow users to specify a fallback component (usually just text) to display in case the URL is invalid.
 */
export function Avatar({
    size,
    holepunch,
    fallback,
    src,
    overlay,
    interactive,
}: Props) {
    return (
        <ParentBase
            width={size}
            height={size}
            viewBox="0 0 32 32"
            interactive={interactive}>
            <foreignObject
                x="0"
                y="0"
                width="32"
                height="32"
                mask={holepunch ? `url(#holepunch-${holepunch})` : undefined}>
                {src && 
                    <Image src={src} />
                }
                {!src && (
                    <Image src="/assets_default/icons/serveritem.png" />
                    // <FallbackBase>
                    //     {typeof fallback === "string" ? (
                    //         // <Initials input={fallback} maxLength={2} />
                    //         <></>
                    //     ) : (
                    //         fallback
                    //     )}
                    //     <EffectWrap>
                    //         <div className="highlight-one"></div>
                    //         <div className="highlight-two"></div>
                    //     </EffectWrap>
                    // </FallbackBase>
                )}
            </foreignObject>
            {overlay}
        </ParentBase>
    );
}

export function OtherIcon({
    size,
    holepunch,
    fallback,
    src,
    overlay,
    interactive,
    arrow,
}: Props) {
    return (
        <ParentBase
            width={size}
            height={size}
            viewBox="0 0 32 32"
            interactive={interactive}>
            <foreignObject
                x="0"
                y="0"
                width="32"
                height="32"
                mask={holepunch ? `url(#holepunch-${holepunch})` : undefined}>
                {src && 
                <ImgWrap>
                    {arrow ? 
                    <ArrowIcon src={src} />:
                    <SetIcon src={src} />
                    }
                    <div className="highlight-one"></div>
                    <div className="highlight-two"></div>
                </ImgWrap>}
                {!src && (
                    <FallbackBase>
                        {typeof fallback === "string" ? (
                            <Initials input={fallback} maxLength={2} />
                        ) : (
                            fallback
                        )}
                        <div className="highlight-one"></div>
                        <div className="highlight-two"></div>
                    </FallbackBase>
                )}
            </foreignObject>
            {overlay}
        </ParentBase>
    );
}