/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React from 'react';
import clsx from 'clsx';
import { ThemeClassNames } from '@docusaurus/theme-common';
import admonitionStyles from '@docusaurus/theme-classic/lib/theme/Admonition/Layout/styles.module.css';
import headingStyles from '@docusaurus/theme-classic/lib/theme/Heading/styles.module.css';

function AdmonitionContainer({type, className, children}) {
  return (
    <div
      className={clsx(
        ThemeClassNames.common.admonition,
        ThemeClassNames.common.admonitionType(type),
        admonitionStyles.admonition,
        className,
      )}
      >
      {children}
    </div>
  );
}
function AdmonitionHeading({icon, id, title}) {
  let depth = 0;
  let trimmedTitle = "";
  // titleにHTML等が含まれている場合は文字列ではなく配列になる
  if(typeof title === "string") {
    // 文字列冒頭の#の数を数える（
    depth = title.match ? (title.toString().match(/^#+/) || [''])[0].length : 0;
    // #を省いたタイトルを得る
    trimmedTitle = depth > 0 ? title.replace(/^#+/, '').trim() : title;  
  } else if (typeof title[0] === "string") {
    depth = title[0].match ? (title[0].match(/^#+/) || [''])[0].length : 0;
    trimmedTitle = depth > 0 ? [title[0].replace(/^#+/, '').trim(), ...title.slice(1)] : title;
  }
  // スクロール位置調整のcss
  const classNames = clsx("anchor", "title", headingStyles.anchorWithStickyNavbar);
  // depthに応じて見出しタグをレンダー
  return (
    <div className={admonitionStyles.admonitionHeading}>
      <span className={admonitionStyles.admonitionIcon}>{icon}</span>
      {(() => {
        if (depth == 3) {
          return(
            <h3
              id={id}
              className={classNames}
            >
              {trimmedTitle}
            </h3>
          )
        } else if (depth == 4) {
          return(
            <h4
              id={id}
              className={classNames}
            >
              {trimmedTitle}
            </h4>
          )
        } else if (depth == 5) {
          return(
            <h5
              id={id}
              className={classNames}
            >
              {trimmedTitle}
            </h5>
          )
        } else if (depth == 6) {
          return(
            <h6
              id={id}
              className={classNames}
            >
              {trimmedTitle}
            </h6>
          )
        } else {
          return(
            <>
              {trimmedTitle}
            </>
          )
        }
      })()}
    </div>
  );
}
function AdmonitionContent({children}) {
  return children ? (
    <div className={admonitionStyles.admonitionContent}>{children}</div>
  ) : null;
}
export default function AdmonitionLayout(props) {
  const {type, icon, title, children, className, id} = props;
  return (
    <AdmonitionContainer type={type} className={className}>
      <AdmonitionHeading title={title} icon={icon} id={id} />
      <AdmonitionContent>{children}</AdmonitionContent>
    </AdmonitionContainer>
  );
}