import React, { useCallback } from 'react';
import styled from 'styled-components';

import { useThemeHooks } from '@redocly/theme/core/hooks';
import { CONTENT_ID } from '@redocly/theme/core/constants';

export function SkipContent(): React.JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  const handleSkipClick = useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault();
    const mainElement = document.getElementById(CONTENT_ID);
    if (mainElement) {
      mainElement.focus();
    }
  }, []);

  return (
    <SkipContentLint href={`#${CONTENT_ID}`} onClick={handleSkipClick}>
      {translate('page.skipToContent.label', 'Skip to content')}
    </SkipContentLint>
  );
}

const SkipContentLint = styled.a`
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 1000;
  opacity: 0;
  text-decoration: none;

  background: var(--skip-content-background-color);
  color: var(--skip-content-text-color);
  padding: var(--skip-content-padding);

  border-radius: var(--skip-content-border-radius);
  border: var(--skip-content-border);
  font-size: var(--skip-content-font-size);
  font-weight: var(--skip-content-font-weight);

  &:focus {
    left: 8px;
    opacity: 1;
  }
`;