import styled from "@emotion/styled";
import React from "react";
import {
  DARK_SECONDARY_TWO,
  LIGHT_ACTIVE,
  LIGHT_SECONDARY_FIVE,
  LIGHT_SECONDARY_THREE,
} from "../../shared/colors";
import { CurrentUser_me } from "../graphql/generated/types";
import { StoreProps } from "../platform/SlideshowStore";

type Props = {
  user: CurrentUser_me;
  style?: any;
} & StoreProps;

enum STATUS {
  "ACTIVE" = "active",
  "AWAY" = "away",
  "DO_NOT_DISTURB" = "do_not_disturb",
  "INVISIBLE" = "invisible",
  "OFFLINE" = "offline",
}

const CURRENT_STATUS = STATUS.ACTIVE;

export function ProfilePicture(props: Props) {
  return props.user.email ? (
    <svg width="24" height="24" viewBox="0 0 32 32" style={props.style}>
      <defs>
        <clipPath id="profileMask">
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M31.0938 21.3213C31.6807 19.6565 32 17.8656 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C17.8656 32 19.6565 31.6807 21.3213 31.0938C20.4899 29.9426 20 28.5285 20 27C20 23.134 23.134 20 27 20C28.5285 20 29.9426 20.4899 31.0938 21.3213Z"
          />
        </clipPath>
        <mask
          id="activeCircle"
          maskContentUnits="objectBoundingBox"
          viewBox="0 0 1 1"
        >
          <circle fill="white" cx="0.5" cy="0.5" r="0.5"></circle>
        </mask>
        <mask
          id="offlineCircle"
          maskContentUnits="objectBoundingBox"
          viewBox="0 0 1 1"
        >
          <circle fill="white" cx="0.5" cy="0.5" r="0.5"></circle>
          <circle fill="black" cx="0.5" cy="0.5" r="0.25"></circle>
        </mask>
      </defs>
      <foreignObject
        x="0"
        y="0"
        width="64"
        height="64"
        clipPath="url(#profileMask)"
      >
        <div
          style={{
            backgroundColor: LIGHT_SECONDARY_THREE,
            height: "32px",
            width: "32px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            color: LIGHT_SECONDARY_FIVE,
          }}
        >
          {props.user.email[0].toUpperCase()}
        </div>
      </foreignObject>
      <rect
        width="10"
        height="10"
        x="22"
        y="22"
        fill={LIGHT_ACTIVE}
        mask="url(#activeCircle)"
      ></rect>
    </svg>
  ) : (
    <svg width="24" height="24" viewBox="0 0 32 32">
      <defs>
        <mask id="profileMask">
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M30.7165 22.2893C31.5426 20.3588 32 18.2328 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C18.2328 32 20.3588 31.5426 22.2893 30.7165C21.4819 29.6945 21 28.4035 21 27C21 23.6863 23.6863 21 27 21C28.4035 21 29.6945 21.4819 30.7165 22.2893Z"
            fill="#C4C4C4"
          />
        </mask>
      </defs>
      <Blank style={{ clipPath: "url(#profileMask)" }} />
    </svg>
    // <Image src={props.user.email} style={{ mask: ProfileMask }} />
  );
}

const Blank = styled.div`
  min-width: 32px;
  min-height: 32px;
  background-color: ${DARK_SECONDARY_TWO};
`;

const Image = styled.img`
  display: block;
  max-width: 32px;
  max-height: 32px;
  object-fit: cover;
`;