import React, { useEffect, useState } from 'react';
import { Button } from 'antd';
import './Index.scss';
import MDEditor from "../../../modules/tpm/challengesnew/tpm-md-editor";
import RenderHtml from "../../../components/render-html";
import { Divider } from 'antd';
import axios from 'axios';

function Personal(props){
  const { user ,current_user , resetUserInfo } = props;
  const [ edit , setEdit ] = useState(false);
  const [ showedit , setShowEdit ] = useState(false);
  const [ description ,setDescription ] = useState("");
  const [ copyDescription ,setCopyDescription ] = useState("");
  useEffect(()=>{
    if(user && user.super_description){
      setDescription(user.super_description);
      setCopyDescription(user.super_description);
      setShowEdit(true);
    }
  },[user])

  function onContentChange(value){
    setDescription(value);
  }

  function emtptyEditFunc(){
    setShowEdit(true);
    setEdit(true);
  }

  function editCancelFunc(){
    if(!copyDescription){
      setShowEdit(false);
    }
    setDescription(copyDescription);
    setEdit(false);
  }

  function editSaveFunc(){
    const url = `/users/${user && user.login}.json`;
    const params={
      user: {
        user_extension_attributes: {
          super_description:description
        }
      }
    }
    axios.put(url,params).then(result=>{
      if(result && result.data){
        setCopyDescription(description);
        setEdit(false);
        setShowEdit(description ?true :false);
        resetUserInfo && resetUserInfo();
      }
    })
  }
  return(
    <div>
    {
      description || showedit?
      user && current_user && user.login === current_user.login &&
      <div className="editPanel">
        {
          edit ? 
          <div>
            <Button ghost onClick={()=>editCancelFunc()}>取消</Button>
            <Button type="primary" ghost onClick={editSaveFunc}>保存</Button>
          </div>
          :
          <Button type="primary" ghost onClick={()=>setEdit(true)}>编辑</Button>
        }
      </div>
      :
      <div className="emptyDescBox">
        <img src={require('./img/nullicon.png')} alt="" width="58px"/>
        <p className="emptyMain">暂无数据</p>
        {
          current_user && user && (current_user.login === user.login) &&
          <div className="emptyContent">
            <p className="emptysub">您可以在此页面定制化您的个人简介信息，包括开发者介绍，宣传链接，宣传图片等</p>
            <Divider className="divider"/>
            <a className="fullBtn" onClick={emtptyEditFunc}>编辑个人简介</a>
          </div>
        }
      </div>
    }
    {
      showedit ?
      <div className="padding20">
      {
        edit ? 
        <MDEditor
          placeholder={"请输入个人简介"}
          height={500}
          mdID={"personal-description"}
          initValue={description || ""}
          onChange={onContentChange}
          isCanAtme = {false}
        ></MDEditor>
        : 
        <RenderHtml className="break_word_comments imageLayerParent" value={description || ""} url={props.history.location} />
      }
      </div>
      :
      ""
    }
    </div>
  )
}
export default Personal;