import React, { useEffect, useState } from "react";
import { Card, Col, Button, message } from "antd";
import "../User/user.scss";
import axios from "axios";
function section_item({ forum_section, key }) {
  const [isStar, setIsStar] = useState(true)
  const [isLoading, setIsLoading] = useState(false)

  function rendomColor() {
    let r_a = Math.floor(Math.random() * 255);
    let r_g = Math.floor(Math.random() * 255);
    let r_b = Math.floor(Math.random() * 255);
    let radom_color = "rgba(" + r_a + "," + r_g + "," + r_b + ",0.8)";
    return radom_color;
  }

  function handleClick(){
    setIsLoading(true);
      let url = `/forum_memos/${forum_section.id}/is_watch.json`;
    axios.post(url, {
      is_watch: isStar ? 0 : 1
    })
    .then((result) => {
      if(result.data.status === 0){
        message.success(result.data.message);
        setIsStar(!isStar)
      }else{
        message.error(result.data.message);
      }
      setIsLoading(false);
    })
    .catch((e) => {
      setIsLoading(false);
      console.log(e);
    });
  }
  return (
    <Col span={6} className="project-card-item forum-section-card" key={key}>
      <Card
        bordered={false}
        hoverable={true}
        actions={[
          <Button type="link" size="small" onClick={()=>handleClick()} loading={isLoading}>
            <span className="color-grey" >{isStar ? "取消收藏" : "收藏"}</span>
          </Button>,
          <Button type="link" size="small" href={`/forums/theme/${forum_section.id}`}>
            <span className="color-green" >查看</span>
          </Button>,
        ]}
        bodyStyle={{ background: rendomColor() }}
      >
        <div className="intresting-forum-section">
          <div className="font-20 color-white">{forum_section.title}</div>
          <div className="mt10 color-white">
            {forum_section.memos_count}个话题
          </div>
        </div>
      </Card>
    </Col>
  );
}
export default section_item;
