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

import { useThemeHooks } from '@redocly/theme/core/hooks';
import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
import { Link } from '@redocly/theme/components/Link/Link';

export type EditPageButtonProps = {
  to: string;
};

export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
  const { useTranslate, useTelemetry } = useThemeHooks();
  const { translate } = useTranslate();
  const telemetry = useTelemetry();

  return (
    <EditPageButtonWrapper
      data-component-name="Buttons/EditPageButton"
      target="_blank"
      to={to}
      onClick={() => telemetry.send('edit_page_link_clicked', {})}
    >
      <ButtonIcon />
      <ButtonText data-translation-key="markdown.editPage.text">
        {translate('markdown.editPage.text', 'Edit')}
      </ButtonText>
    </EditPageButtonWrapper>
  );
}

const EditPageButtonWrapper = styled(Link)`
  height: fit-content;
  margin-left: auto;
  display: inline-flex;
  color: var(--text-color-secondary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  text-decoration: none;

  &:hover {
    color: var(--text-color-primary);
  }

  @media print {
    display: none;
  }
`;

const ButtonIcon = styled(EditIcon)`
  margin-right: 3px;
`;

const ButtonText = styled.span`
  line-height: 14px;
`;