import React, { useEffect, useState } from "react";
import { Avatar, Upload, message } from "antd";
import { getUrl } from "educoder";
import "antd/dist/antd.css";
import { HeadPhoto, HeadPhotoHover } from "../css/layout.jsx";
import ImgCrop from "antd-img-crop";
import axios from "axios";
function user_avatar({ avatar, is_current_user, user_id, login }) {
  const current_route = window.location.protocol + "//" + window.location.host;
  const [isHover, setIsHover] = useState(false);
  const [isClick, setIsClick] = useState(false);
  const [userAvatar, setUserAvatar] = useState("");
  const [isLoading, setLoadinStatus] = useState(false);
  useEffect(() => {
    setUserAvatar(avatar);
  }, []);
  const beforeUpload = (file) => {
    const isJPG = file.type === "image/jpeg";
    const isPNG = file.type === "image/png";
    const isGIF = file.type === "image/gif";
    if (!isJPG && !isPNG && !isGIF) {
      message.error("只能上传图片文件！(jpg、png或gif)");
      setIsHover(false);
      setIsClick(false);
      return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 1;
    if (!isLt2M) {
      setIsHover(false);
        setIsClick(false);
      message.error("图片大小必须小于 2MB!");
      return false;
    }
    return true;
  };

  function sync_upload_picture(file) {
    setLoadinStatus(true);
    let base64Url = "";
    let reader = new FileReader();
    reader.readAsDataURL(file.file);
    reader.onloadend = function () {
      base64Url = reader.result;
      if (base64Url && base64Url.length > 0) {
        handleUpload(base64Url)
      } else {
        setLoadinStatus(false);
        message.error("上传失败，请稍后重试");
      }
    };
  }

  function handleUpload(base64Url) {
    var formData = new FormData();
    formData.append("img", base64Url);
    formData.append("source_type", "User");
    formData.append("source_id", user_id);
    formData.append("is_direct", 0);
    axios.post(`/upload_avatar.json`, formData)
      .then((result) => {
        if (result && result.data.status === 0) {
          setUserAvatar(result.data.url)

        } else {
          message.error(result.data.message);
        }
        setIsHover(false);
        setIsClick(false);
        setLoadinStatus(false);
      })
      .catch((e) => {
        setIsHover(false);
        setIsClick(false);
        setLoadinStatus(false);
        console.log(e);
      });
  }

  return (
    <HeadPhoto>
      <a
        href="javascript:void(0)"
        onMouseEnter={() => setIsHover(true)}
        onMouseLeave={() => setIsHover(isClick)}
      >
        <Avatar size={109} src={getUrl(userAvatar)} />
        {/* is_current_user && (isHover || isClick) */}
        {false && (
          <HeadPhotoHover onClick={() => setIsClick(true)}>
            <ImgCrop rotate>
              <Upload
                action={current_route + "/upload_avatar.json"}
                showUploadList={false}
                customRequest={sync_upload_picture}
                beforeUpload={beforeUpload}
              >
                <span className="upload-edit-word">{isLoading?"上传中..":"修改头像"}</span>
              </Upload>
            </ImgCrop>
          </HeadPhotoHover>
        )}
      </a>
    </HeadPhoto>
  );
}

export default user_avatar;
