import React, { useState, useEffect } from "react";
import { Spin, message, notification } from "antd";
import _service from "@netuno/service-client";

import './index.less';

function OtherAstros({aroundAstroUid}) {
  if (aroundAstroUid) {
    //console.log("OtherAstros called!");
    //console.log(aroundAstroUid);
  
    //const servicePrefix = _service.config().prefix;
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
      setLoading(true);
      _service({
        url: "/astro/around-list",
        data:{aroundAstroUid},
        success: (response) => {
          setList(response.json);
          setLoading(false);
        },
        fail: (e) => {
          console.log("Service Error", e);
          notification.error({
            message:"Erro",
            description:"Não foi possível encontrar o astro."
          });
          setLoading(false);
        },
      });
    }, []);
    if (loading) {
      return( <Spin size="large"/> );
    }
    console.log("List value:", list);
    if( list.length > 0 ){ 
      return ( 
        <div className="other-astros">
          <h1>Astros na sua orbita:</h1>
          <div className="other-astros-list">
            <ul>{
              list.map((astro) => { 
                return (
                  <>
                    <li>
                      <a href={`/pt/astro/${astro.uid}`}>
                        {`${astro.name} (${astro.type})`}
                      </a>
                    </li>
                  </>
                );
              })
            }</ul>
          </div>
        </div>
      );
    }
  }
}
export default OtherAstros;