import * as React from 'react';
import styled from 'styled-components';

import type { ResolvedNavItemWithLink } from '@redocly/config';

import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
import { Button } from '@redocly/theme/components/Button/Button';
import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';

export type NextPageType = {
  nextPage?: ResolvedNavItemWithLink | null;
  className?: string;
};

export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
  const { navigation } = useThemeConfig();
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  if (!nextPage || navigation?.nextButton?.hide) {
    return <div>&nbsp;</div>;
  }

  const nextPageText = nextPage.label || nextPage.routeSlug || '';
  const translationKey = 'page.nextButton';
  const label =
    navigation?.nextButton?.text || translate(translationKey, { defaultValue: 'Next page' });

  return (
    <NextButtonWrapper
      data-component-name="PageNavigation/NextButton"
      data-translation-key={translationKey}
    >
      <NextPageLabel>{label}</NextPageLabel>
      <NextPageButton
        size="large"
        to={nextPage.link}
        extraClass={className}
        variant="link"
        icon={<ArrowRightIcon />}
        iconPosition="right"
      >
        {nextPageText}
      </NextPageButton>
    </NextButtonWrapper>
  );
}

const NextButtonWrapper = styled.div`
  display: flex;
  flex-direction: column;
  text-align: right;
`;

const NextPageButton = styled(Button)`
  text-wrap: wrap;
  padding-left: 0;
  padding-right: 0;
`;

const NextPageLabel = styled.span`
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
`;