import React, { useEffect, useState } from 'react'
import "./index.less"
import { Table, Tag, Space, notification, Button } from 'antd';
import _service from "@netuno/service-client";


function Communities(){
    const [communities, setCommunities] = useState([]);
    
    const [columns, setColumns] = useState([
        {
          title: 'Comunidade',
          dataIndex: 'nome',
        },
        {
          title: 'Seguindo',
          dataIndex: 'seguindo',
          render: (text, record) => {
              return(
                  <>
                {record.seguindo === 0? (
                    <Button onClick={() => handleFollow(record.uid, record.nome)}>Seguir</Button>
                  ):(
                    <Button onClick={() => handleUnfollow(record.uid, record.nome)} type="primary">Seguindo</Button>
                  )}
                  </>
              )
          }
        },
      ]);

    const handleFollow = (uid, name) => {
        _service({
            method: 'PUT',
            url: "api/communities/follow",
            data: {uid: uid},
            success: (response) => {
                notification.success({
                    message: `Agora você está seguindo ${name}`
                })
            },
            fail: (e) => {
                notification["error"]({
                    message: `Não foi possível seguir ${name}`,
                });
            }
        });
    }

    const handleUnfollow = (uid, name) => {
        _service({
            method: 'DELETE',
            url: "api/communities/unfollow",
            data: {uid: uid},
            success: (response) => {
                notification.success({
                    message: `Você deixou de seguir ${name}`
                })
            },
            fail: (e) => {
                notification["error"]({
                    message: `Não foi possível deixar de seguir ${name}`,
                });
                console.log(e)
            }
        });
    }
    useEffect(() => {
        _service({
            url:"api/communities/",
            method: "GET",
            success: (response) => {
                setCommunities(response.json);
            },
            fail: () => {
                notification.error({
                    message: "Erro to load communities"
                })
            }
        })
    }, [columns])

    return(
        <>
        
        <Table columns={columns} dataSource={communities} size="small" />
        </>
    )
}

export default Communities