import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { Spin, Image, notification, Descriptions, Divider, Popover, 
 // Avatar, List 
} from "antd";

import Cluar from '../../common/Cluar';
import _service from "@netuno/service-client";

import './index.less';
import OtherAstros from "./OtherAstros";

function AstroDetails() {
  const servicePrefix = _service.config().prefix;
  const { uid } = useParams(null);
  const [loading, setLoading] = useState(true);
  const [astroInfo, setAstroInfo] = useState([]);

  useEffect(() => {
    _service({
      url: "/astro",
      data: { uid },
      success: (response) => {
        setAstroInfo(response.json);
        setLoading(false);
      },
      fail: (e) => {
        console.error("Service Error", e);
        notification.error({
          message: "Erro",
          description: "Não foi possível encontrar o astro.",
        });
        setLoading(false);
      },
    });
  }, []);
  if (loading) {
    return (
      <section className="content">
        <div className="astro-details">
          <Spin size="large"/>
        </div>
      </section>
    );
  }
  if (astroInfo == null) {
    console.log("astro == null")
    return (
      <section className="content">
        <div className="astro-details">
          <p>N&atilde;o foi poss&iacute;vel carregar os detalhes do astro.</p>
        </div>
      </section>
    );
  }
  //const astroType =  astroInfo.type;
  const cluarLanguage = Cluar.currentLanguage().locale;
  
  const astroBase = [
    {label: 'Tipo de astro', children: astroInfo.name, key: '1'}
    ,{label: 'Raio equatorial (km)', children: astroInfo.equatorialRadius.toLocaleString(cluarLanguage), key: '2'} 
    ,{label: 'Velocidade rotação (km/s)', children: astroInfo.rotationVelocity.toLocaleString(cluarLanguage), key: '3'} 
  ];
  const aroundAstro = astroInfo.aroundAstro;
  if (aroundAstro && aroundAstro.uid != "") {
    astroBase.push(
      {
        label: 'Orbita em torno', 
        children: <a href={`/pt/astro/${aroundAstro.uid}`}>{aroundAstro.name}</a>, 
        //span: 3,
        key: '4'
      }
    );
    astroBase.push({
      label: 
        <Popover 
          content={<p>
            É o ponto da órbita de um corpo celeste em que ele se encontra <b>mais próximo</b> do astro em torno do qual gravita.
          </p>}>Periastro (km)
        </Popover>, 
      children: astroInfo.periapsis.toLocaleString(cluarLanguage),
      key: '5'
    })
    astroBase.push({
      label: 
        <Popover 
          content={<p>
            É o ponto da órbita de um corpo celeste em que ele se encontra <b>mais distante</b> do astro em torno do qual gravita.
          </p>}>Apoastro (km)
        </Popover>, 
      children: astroInfo.apoapsis.toLocaleString(cluarLanguage),
      key: '6'
    })
  }
  
  return (
    <section className="content">
      <div className="astro-details">
        <Image
          width={200}
          src={`${servicePrefix}/astro/image?uid=${astroInfo.uid}`}
          alt={`"Imagem do ${astroInfo.name}"`}
        />
        <Divider orientation="left"><h1>{astroInfo.name}</h1></Divider>
        <Descriptions items={astroBase} />
        {/*<OtherAstros />*/}
      </div>
    </section>
  );
}

export default AstroDetails;