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

import type { PropsWithChildren } from 'react';

import { typography } from '@redocly/theme/core/utils/theme-helpers';
import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/baseTable';
import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/headingAnchor';

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}

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

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

  h1.md,
  h2.md,
  h3.md,
  h4.md,
  h5.md,
  h6.md {
    font-weight: var(--heading-font-weight);
    font-family: var(--heading-font-family);
    position: relative;

    scroll-margin-top: var(--navbar-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);
  }

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

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

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

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

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

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

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

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

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

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

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

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

  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,
  ol {
    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);
  }
`;