import { TopNavLink, TopNavWrapper } from "@dashboard/components/AppLayout";
import { LinkState } from "@dashboard/components/Link";
import { AppAvatar } from "@dashboard/new-apps/components/AppAvatar/AppAvatar";
import { AppUrls } from "@dashboard/new-apps/urls";
import { Box, Button, Text } from "@saleor/macaw-ui/next";
import React from "react";
import { FormattedMessage } from "react-intl";
import { useLocation } from "react-router";

interface AppPageNavProps {
  name: string | undefined | null;
  supportUrl: string | undefined | null;
  homepageUrl: string | undefined | null;
}

export const AppPageNav: React.FC<AppPageNavProps> = ({
  name,
  supportUrl,
  homepageUrl,
}) => {
  const location = useLocation<LinkState>();
  const goBackLink = location.state?.from ?? AppUrls.resolveAppListUrl();

  return (
    <TopNavWrapper>
      <Box
        display="flex"
        alignItems="center"
        justifyContent="space-between"
        width="100%"
      >
        <Box display="flex" gap={7} alignItems="center">
          <TopNavLink to={goBackLink} variant="tertiary" />
          <Box display="flex" gap={5} alignItems="center">
            <AppAvatar />
            <Text variant="heading">{name}</Text>
          </Box>
        </Box>
        <Box display="flex" gap={4}>
          {supportUrl && (
            <Button
              variant="secondary"
              size="medium"
              onClick={() => {
                window.open(supportUrl, "_blank");
              }}
            >
              <FormattedMessage defaultMessage="Support" id="HqRNN8" />
            </Button>
          )}
          {homepageUrl && (
            <Button
              variant="secondary"
              size="medium"
              onClick={() => {
                window.open(homepageUrl, "_blank");
              }}
            >
              <FormattedMessage defaultMessage="Homepage" id="rxNddi" />
            </Button>
          )}
        </Box>
      </Box>
    </TopNavWrapper>
  );
};