import React from 'react';

import { css, cx } from '@leafygreen-ui/emotion';
// @ts-expect-error
import GovernmentBuildingIcon from '@leafygreen-ui/icon/dist/GovernmentBuilding';
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
import Tooltip from '@leafygreen-ui/tooltip';
import { Body } from '@leafygreen-ui/typography';

import {
  bannerContainerBaseStyle,
  bannerContainerDesktopBaseStyle,
  bannerContainerDesktopThemeStyle,
  bannerContainerThemeStyle,
  bannerMargin,
  bannerTabBaseStyle,
  bannerTabThemeStyle,
  bodyBaseStyle,
  bodyThemeStyle,
  iconThemeColor,
  mobileContainer,
  mobileMargin,
  setTabRadius,
} from './GovBanner.styles';

const tooltipContent =
  'You are currently logged into the MongoDB Atlas for Government environment.';

const sharedTooltipProps = {
  align: 'bottom',
  variant: 'dark',
} as const;

function FullWidthGovBanner({ isTablet = false }: { isTablet?: boolean }) {
  const { theme, darkMode } = useDarkMode();

  const desktopTabStyles = css`
    height: 34px;
    ${setTabRadius(16, darkMode)};
  `;

  const tabletTabStyles = css`
    height: 20px;
    ${setTabRadius(8, darkMode)};
  `;
  return (
    <div
      data-testid="org-nav-fedramp-banner"
      className={cx(
        bannerContainerBaseStyle,
        bannerContainerThemeStyle[theme],
        bannerContainerDesktopBaseStyle,
        bannerContainerDesktopThemeStyle[theme],
      )}
    >
      <Tooltip
        {...sharedTooltipProps}
        usePortal={false}
        trigger={
          <div
            className={cx(bannerTabBaseStyle, bannerTabThemeStyle[theme], {
              [desktopTabStyles]: !isTablet,
              [tabletTabStyles]: isTablet,
            })}
          >
            <GovernmentBuildingIcon
              size="small"
              className={cx(iconThemeColor[theme], bannerMargin)}
            />
            <Body className={cx(bodyBaseStyle, bodyThemeStyle[theme])}>
              MongoDB Atlas for Government
            </Body>
          </div>
        }
        justify="middle"
        triggerEvent={isTablet ? 'click' : 'hover'}
      >
        {tooltipContent}
      </Tooltip>
    </div>
  );
}

function MobileGovTooltip() {
  const { theme } = useDarkMode();
  return (
    <Tooltip
      {...sharedTooltipProps}
      trigger={
        <div className={cx(mobileContainer, bannerContainerThemeStyle[theme])}>
          <GovernmentBuildingIcon
            className={cx(iconThemeColor[theme], mobileMargin)}
          />
        </div>
      }
      usePortal={false}
      justify="end"
      triggerEvent="click"
    >
      {tooltipContent}
    </Tooltip>
  );
}

export { FullWidthGovBanner, MobileGovTooltip };
