import * as React from 'react';
import styled from 'styled-components';
import { format } from 'timeago.js';

import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';

const FORMATS = {
  timeago: (date: Date, locale: string) => format(date, locale),
  iso: (date: Date) => date.toISOString().split('T')[0],
  short: (date: Date, locale: string) =>
    date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
  long: (date: Date, locale: string) =>
    date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
};

export type LastUpdatedProps = {
  lastModified: Date;
  format?: keyof typeof FORMATS;
  locale?: string;
  className?: string;
};

export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
  const { markdown: { lastUpdatedBlock = {} } = {} } = useThemeConfig();
  const { useTranslate, useL10nConfig } = useThemeHooks();
  const { translate } = useTranslate();
  const { currentLocale } = useL10nConfig();

  if (lastUpdatedBlock?.hide) {
    return null;
  }

  const lastModified = props.lastModified;
  const format = props.format || lastUpdatedBlock.format || 'timeago';
  const locale =
    props.locale ||
    lastUpdatedBlock.locale ||
    (currentLocale !== DEFAULT_LOCALE_PLACEHOLDER ? currentLocale || 'en-US' : 'en-US');

  const isoDate = lastModified.toISOString().split('T')[0];

  const lastUpdatedString = FORMATS[format as keyof typeof FORMATS](lastModified, locale);
  const translationKey = format === 'timeago' ? 'page.lastUpdated.timeago' : 'page.lastUpdated.on';

  const text =
    format === 'timeago'
      ? translate(translationKey, 'Last updated') + ' '
      : translate(translationKey, 'Last updated on');

  return (
    <LastUpdatedWrapper
      className={props.className}
      data-component-name="LastUpdated/LastUpdated"
      rawOnPrint={format === 'timeago'}
      data-print-datetime={isoDate}
      data-translation-key={translationKey}
    >
      {text} {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
      <time dateTime={isoDate}>{lastUpdatedString}</time>
    </LastUpdatedWrapper>
  );
}

const LastUpdatedWrapper = styled.div<{ rawOnPrint?: boolean }>`
  color: var(--last-updated-text-color);
  font-size: var(--last-updated-font-size);
  font-family: var(--last-updated-font-family);
  line-height: var(--last-updated-line-height);
  padding-bottom: 30px;

  ${({ rawOnPrint }) =>
    rawOnPrint &&
    `@media print {
      time {
        display: none;
      }
      &::after {
        content: attr(data-print-datetime);
      }
    }
  `}
`;