import React, {useState } from "react";
import { Form, Input, Icon, Button, message } from "antd";
import axios from "axios";
const { Item } = Form;

function user_brief({ brief, login, is_current_user }) {
  const [editBrief, setEditBrief] = useState(null);
  const [isEdit, setEditStatus] = useState(false);
  const [isLoading, setLoadingStatus] = useState(false);
  const changeInput = (e) => {
    setEditBrief(e.target.value)
  };
  const edit_brief = () => {
    setLoadingStatus(true);
    let url = `/users/${login}/edit_brief.json`;
    axios
      .post(url, { content: editBrief })
      .then((result) => {
        if (result && result.data.status >= 0) {
          message.success(result.data.message);
          setEditStatus(false);
        } else {
          message.error(result.data.message);
        }
        setLoadingStatus(false);
      })
      .catch((e) => {
        setLoadingStatus(false);
        console.log(e);
      });
  };
  return (
    <div className="mb25">
    {!isEdit && (
      <div>
        {editBrief
          ? editBrief
          : brief
          ? brief
          : "这家伙很懒，什么都没留下~"}
        {is_current_user && (
          <span className="ml15" onClick={() => setEditStatus(true)}>
            <Icon type="edit"></Icon>
          </span>
        )}
      </div>
    )}
    {isEdit && (
      <Form layout="inline">
        <Item>
          <Input
            placeholder="个人简介"
            defaultValue={brief}
            onChange={(e) => changeInput(e)}
            maxLength={20}
          />
        </Item>
        <Button
          type="primary"
          htmlType="submit"
          size="small"
          loading={isLoading}
          className="mt8"
          onClick={() => edit_brief()}
        >
          提交
        </Button>
        <Button
          type="default"
          size="small"
          onClick={() => setEditStatus(false)}
          className="ml15 mt8"
        >
          取消
        </Button>
      </Form>
    )}
  </div>
  );
}
export default user_brief;
