import styled, { css } from 'styled-components';

import type { PropsWithChildren } from 'react';

import { typography } from '@redocly/theme/core/utils';
import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/base-table';
import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/heading-anchor';
import {
  ANCHOR_CLASS,
  H1_CLASS,
  H2_CLASS,
  H3_CLASS,
  H4_CLASS,
  H5_CLASS,
  H6_CLASS,
  HEADING_ANCHOR_CLASS,
  MARKDOWN_CLASS_NAME,
} from '@redocly/theme/core/constants';

export type MarkdownProps = PropsWithChildren<{
  className?: string;
  compact?: boolean;
  inline?: boolean;
  base?: boolean;
  ref?: (node: HTMLDivElement) => void;
}>;

export const Markdown = styled.main.attrs<{
  className?: string;
}>(({ className }) => ({
  'data-component-name': 'Markdown/Markdown',
  className,
}))<MarkdownProps>`
  font-size: var(--md-content-font-size);
  font-family: var(--md-content-font-family);
  font-weight: var(--md-content-font-weight);
  line-height: var(--md-content-line-height);
  color: var(--md-content-text-color);
  padding: 0;

  ${({ compact }) =>
    compact &&
    css`
      p:first-child {
        margin-top: 0;
      }
      p:last-child {
        margin-bottom: 0;
      }
    `}

  ${({ base }) =>
    base &&
    css`
      p {
        font-size: var(--md-content-font-size);
      }
    `}

  ${({ inline }) =>
    inline &&
    css`
      p {
        display: inline-block;
      }
    `}

  ${markdownLinksCss}

  a[name], [id] {
    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
  }

  img,
  iframe {
    max-width: 100%;
  }

  .${HEADING_ANCHOR_CLASS} {
    font-weight: var(--heading-font-weight);
    font-family: var(--heading-font-family);
    position: relative;

    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
    ${headingAnchorCss(ANCHOR_CLASS)};

    h1, h2, h3, h4, h5, h6 {
      display: flex;
      align-items: flex-start;
      gap: var(--spacing-sm);
      margin: 0;
      font: inherit;
      color: inherit;
    }
  }

  .${H1_CLASS} {
    ${typography('h1')};
    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;

    h1 code {
      font-size: var(--h1-font-size);
      line-height: var(--h1-code-line-height);
    }
  }

  .${H2_CLASS} {
    ${typography('h2')};
    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;

    h2 code {
      font-size: var(--h2-font-size);
      line-height: var(--h2-code-line-height);
    }
  }

  .${H3_CLASS} {
    ${typography('h3')};
    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;

    h3 code {
      font-size: var(--h3-font-size);
      line-height: var(--h3-code-line-height);
    }
  }

  .${H4_CLASS} {
    ${typography('h4')};
    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;

    h4 code {
      font-size: var(--h4-font-size);
      line-height: var(--h4-code-line-height);
    }
  }

  .${H5_CLASS} {
    ${typography('h5')};
    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;

    h5 code {
      font-size: var(--h5-font-size);
      line-height: var(--h5-code-line-height);
    }
  }

  .${H6_CLASS} {
    ${typography('h6')};
    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;

    h6 code {
      font-size: var(--h6-font-size);
      line-height: var(--h6-code-line-height);
    }
  }

  strong {
    font-weight: var(--font-weight-bold);
  }

  hr {
    border-top: 1px solid var(--md-hr-border-color);
    background-color: var(--md-hr-bg-color);
    height: var(--md-hr-height);
    margin: var(--md-hr-margin-vertical) 0;
  }

  details {
    margin: 1.125em 0;

    summary {
      color: var(--text-color-secondary);
      font-weight: var(--font-weight-regular);
      outline: 0;
      padding: 0;
      cursor: pointer;
    }

    > :not(summary):first-of-type {
      margin-top: 1.25em;
    }

    > *:last-child {
      margin-bottom: 1.25em;
    }

    > :not(summary) {
      margin-left: 2em;
    }
  }

  ${markdownBaseTableCss};

  p {
    margin: var(--md-paragraph-margin);
  }

  /**
   * @deprecated Legacy styles for ejected Heading components that render h1-h6 as the root.
   *
   * Deprecated legacy heading styles start.
   */
  h1.${MARKDOWN_CLASS_NAME} {
    ${typography('h1')};
    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
  }

  h2.${MARKDOWN_CLASS_NAME} {
    ${typography('h2')};
    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
  }

  h3.${MARKDOWN_CLASS_NAME} {
    ${typography('h3')};
    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
  }

  h4.${MARKDOWN_CLASS_NAME} {
    ${typography('h4')};
    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
  }

  h5.${MARKDOWN_CLASS_NAME} {
    ${typography('h5')};
    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
  }

  h6.${MARKDOWN_CLASS_NAME} {
    ${typography('h6')};
    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
  }

  h1.${MARKDOWN_CLASS_NAME} code {
    font-size: var(--h1-font-size);
    line-height: var(--h1-code-line-height);
  }

  h2.${MARKDOWN_CLASS_NAME} code {
    font-size: var(--h2-font-size);
    line-height: var(--h2-code-line-height);
  }

  h3.${MARKDOWN_CLASS_NAME} code {
    font-size: var(--h3-font-size);
    line-height: var(--h3-code-line-height);
  }

  h4.${MARKDOWN_CLASS_NAME} code {
    font-size: var(--h4-font-size);
    line-height: var(--h4-code-line-height);
  }

  h5.${MARKDOWN_CLASS_NAME} code {
    font-size: var(--h5-font-size);
    line-height: var(--h5-code-line-height);
  }

  h6.${MARKDOWN_CLASS_NAME} code {
    font-size: var(--h6-font-size);
    line-height: var(--h6-code-line-height);
  }
  /* Deprecated legacy heading styles end. */

  code {
    color: var(--inline-code-text-color);
    background-color: var(--inline-code-bg-color);

    border-radius: var(--inline-code-border-radius);
    padding: 0.19rem var(--spacing-xxs);
    font-weight: var(--code-font-weight);
    word-break: break-word;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-monospaced);
    line-height: var(--line-height-sm);
  }

  && pre {
    white-space: var(--code-wrap, pre);
    background-color: var(--code-block-bg-color);
    font-family: var(--code-block-font-family);
    color: var(--code-block-text-color);
    padding: var(--code-block-padding);
    overflow-x: auto;
    line-height: var(--line-height-base);
    margin: var(--md-pre-margin);

    code {
      background-color: transparent;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      border: none;
    }
  }

  blockquote {
    margin: var(--md-blockquote-margin-vertical) var(--md-blockquote-margin-horizontal);
    padding: var(--md-blockquote-padding-vertical) var(--md-blockquote-padding-horizontal);
    border-left: var(--md-blockquote-border-left);
    background-color: var(--md-blockquote-bg-color);
    color: var(--md-blockquote-text-color);
    box-shadow: var(--md-blockquote-box-shadow);

    & > p:first-child {
      margin-top: 0;
    }
  }

  img {
    max-width: 100%;
    box-sizing: content-box;
    margin: 0 auto;

    &:only-child {
      display: block;
    }
  }

  p,
  li {
    & > img:only-child {
      display: inline-block;
    }
  }

  ul.${MARKDOWN_CLASS_NAME},
  ol.${MARKDOWN_CLASS_NAME} {
    padding-left: var(--md-list-left-padding);
    margin: var(--md-list-margin);

    ul,
    ol {
      margin-bottom: 0;
      margin-top: 0;
    }
  }

  li {
    list-style: var(--md-list-item-style);

    &:not(:last-child) {
      margin-bottom: calc(var(--spacing-xxs) / 2);
    }

    &::marker {
      padding-left: 0.25rem;
    }
  }

  ul > li:has(input[type='checkbox']) {
    list-style: var(--md-checkbox-list-item-style);
  }

  ol > li {
    list-style: var(--md-numbered-list-item-style);
  }

  ol > li:before {
    content: counter(list-item);
    display: var(--md-numbered-list-number-display);
    color: var(--md-numbered-list-number-text-color);
    font-size: var(--md-numbered-list-number-font-size);
    font-family: var(--md-numbered-list-number-font-family);
    font-weight: var(--md-numbered-list-number-font-weight);
    background-color: var(--md-numbered-list-number-bg-color);
    border-radius: var(--md-numbered-list-number-border-radius);
    border: var(--md-numbered-list-number-border);
    margin-right: var(--md-numbered-list-number-margin-right);
    padding: var(--md-numbered-list-number-padding);
  }
`;