import React, { ImgHTMLAttributes, useState } from "react";

import "./Avatar.css";
import {
  renderProps,
  onLoad,
  getCN,
  getClassName,
  get_typeName,
} from "../utils";

export interface IAvatar extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode,
  badge?: React.ReactNode,
  src?: string | undefined | [string, string],
  mode?: "default" | "app",
  size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96 | number,
  filter?: number,
  after?: React.ReactNode,
  shadow?: boolean,
  sizeShadow?: number,
  loading?: ImgHTMLAttributes<HTMLImageElement>["loading"],
}

export const BorderRadiusAuto = (size: number) => {
  var new_size = size / 3.71428571429;
  if (new_size > 20) return 20;
  return new_size
  //3,71428571429
}

const Avatar = ({
  children,
  src,
  mode = `default`,
  size = 48,
  filter = 10,
  after,
  shadow = false,
  sizeShadow = size,
  loading,
  badge,
  ...props
}: IAvatar) => {
  const [status_image, setStatusImage] = useState([true, true]);

  const __src = Array.isArray(src) ? src : [src];

  React.useEffect(() => {
    for (var i = 0; i < __src.length; i++) {
      onLoad(src, (data: any) => {
        if (data == `error`) status_image[i] = false;
        if (data == `success`) status_image[i] = true;

        setStatusImage([status_image[0], status_image[1]]);
      });
    }
  }, [src])

  return (
    <div {...renderProps(props)} className={getClassName(`Avatar`, props.className)}>
      <div
        data-image-status={status_image[0]}
        data-mode={mode}
        style={{
          width: __src[1] && size / 1.3,
          height: __src[1] && size / 1.3
        }}
        className={getClassName(`MYUI-Avatar__in`)}
      >
        {__src[0] && <img
          loading={loading}
          src={__src[0]}
          width={__src[1] ? size / 2 : size}
          height={__src[1] ? size / 2 : size}
          style={{
            borderRadius: mode == `app` ? BorderRadiusAuto(size) : `50%`
          }}
          className={getClassName([
            `Avatar__children`,
            __src[1] && `Avatar__children--duo-1`
          ])}
        />}
        {__src[1] && <img
          loading={loading}
          src={__src[1]}
          width={size / 2}
          height={size / 2}
          style={{
            borderRadius: mode == `app` ? BorderRadiusAuto(size) : `50%`
          }}
          className={getClassName([
            `Avatar__children`,
            `Avatar__children--duo-2`
          ])}
        />}
        {badge && <div className={getClassName(`Avatar__badge`)}>{badge}</div>}
        {after && <div className={getClassName(`Avatar__after`)}>{after}</div>}

        {__src[0] && shadow && (
          <img
            loading={loading}
            src={__src[0]}
            width={sizeShadow}
            height={sizeShadow}
            style={{
              filter: `blur(${filter}px)`,
              borderRadius: mode == `app` ? BorderRadiusAuto(size) : `50%`
            }}
            className={getClassName(`Avatar__children--shadow`)}
          />
        )}
      </div>
      {children}
    </div>
  );
}

/* 
<div {...renderProps(props)} className="MYUI-Avatar">
      <div className={getCN(["MYUI-Avatar__in", `Avatar__in--${mode}`])}>
        <div
          style={{
            width: size,
            height: size,
            background: `url(${src})`,
          }}
          className={getCN([
            `Avatar__children--${mode}`,
            !status_image && `Avatar__children--image-error`,
          ])}
        >
          {after && (
            <div
              className={getCN([
                `MYUI-Avatar__after`,
                get_typeName(<Avatar />, after) && `MYUI-Avatar__after--avatar`,
              ])}
            >
              {after}
            </div>
          )}
        </div>
        {shadow && (
          <div
            style={{
              width: sizeShadow,
              height: sizeShadow,
              background: `url(${src})`,
              filter: `blur(${filter}px) saturate(2)`
            }}
            className={`MYUI-Avatar__children--shadow`}
          />
        )}
      </div>
      {children}
    </div>
*/

export default Avatar;