import React, { useState, useEffect } from "react";
import "./index.less";
import { Redirect, Link } from "react-router-dom";
import _auth from "@netuno/auth-client";
import { PageHeader, Dropdown, Menu, notification } from "antd";
import {
  DownOutlined,
  LogoutOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import _service from "@netuno/service-client";

const Main = () => {
  const [isLogged, setIsLogged] = useState(false);
  const [dataUser, setDataUser] = useState([]);
  useEffect(() => {
    _service({
      method: "GET",
      url: "info",
      success: (response) => {
        setDataUser(response.json);
        setIsLogged(true);
      },
      fail: (e) => {
        console.log("Service Error", e);
        notification["error"]({
          message: "Informações",
          description: "Não foi possível carregar as informações do usuário.",
        });
      },
    });
  }, []);
  if (!_auth.isLogged()) {
    return <Redirect to="/login" />;
  } else {
    const menu = (
      <Menu>
        <Menu.Item>
          <Link>
            <SettingOutlined />
            Configurações da conta
          </Link>
        </Menu.Item>
        <Menu.Item
          danger
          onClick={() => {
            _auth.logout();
            setIsLogged(false);
          }}
        >
          <LogoutOutlined />
          Sair
        </Menu.Item>
      </Menu>
    );
    return (
      <PageHeader
        ghost={false}
        title="Social Netuno"
        subTitle="Maior que o Facebook"
        className="header"
        extra={[
          <Dropdown overlay={menu}>
            <a
              className="ant-dropdown-link"
              onClick={(e) => e.preventDefault()}
            >
              {isLogged && `${dataUser.name} ${dataUser.surname}`}{" "}
              <DownOutlined />
            </a>
          </Dropdown>,
        ]}
      />
    );
  }
};

export default Main;