import 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 { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';

export type PreviousPageType = {
  prevPage?: ResolvedNavItemWithLink | null;
  className?: string;
};

export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.Element {
  const { navigation } = useThemeConfig();
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

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

  const prevPageText = prevPage.label || prevPage.routeSlug || '';
  const translationKey = 'page.previousButton';
  const label =
    navigation?.previousButton?.text ||
    translate(translationKey, { defaultValue: 'Previous page' });

  return (
    <PreviousButtonWrapper
      data-component-name="PageNavigation/PreviousButton"
      data-translation-key={translationKey}
    >
      <PreviousPageLabel>{label}</PreviousPageLabel>
      <PreviousPageButton
        size="large"
        to={prevPage.link}
        extraClass={className}
        variant="link"
        icon={<ArrowLeftIcon />}
        iconPosition="left"
      >
        {prevPageText}
      </PreviousPageButton>
    </PreviousButtonWrapper>
  );
}

const PreviousButtonWrapper = styled.div`
  display: flex;
  flex-direction: column;
  text-align: left;
`;

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

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