import Prism from 'prismjs';
import { useEffect, useMemo } from 'react';
import { useIntl } from 'react-intl';

const PRISM_PLUGINS = [
  'autoloader',
  'color-scheme',
  'command-line',
  'copy-to-clipboard',
  'diff-highlight',
  'inline-color',
  'line-highlight',
  'line-numbers',
  'match-braces',
  'normalize-whitespace',
  'show-language',
  'toolbar',
] as const;

export type PrismPlugin = (typeof PRISM_PLUGINS)[number];

export type DefaultPrismPlugin = Extract<
  PrismPlugin,
  | 'autoloader'
  | 'color-scheme'
  | 'copy-to-clipboard'
  | 'match-braces'
  | 'normalize-whitespace'
  | 'show-language'
  | 'toolbar'
>;

export type OptionalPrismPlugin = Exclude<PrismPlugin, DefaultPrismPlugin>;

export type PrismLanguage =
  | 'apacheconf'
  | 'bash'
  | 'css'
  | 'diff'
  | 'docker'
  | 'editorconfig'
  | 'ejs'
  | 'git'
  | 'graphql'
  | 'html'
  | 'ignore'
  | 'ini'
  | 'javascript'
  | 'jsdoc'
  | 'json'
  | 'jsx'
  | 'makefile'
  | 'markup'
  | 'php'
  | 'phpdoc'
  | 'regex'
  | 'scss'
  | 'shell-session'
  | 'smarty'
  | 'tcl'
  | 'toml'
  | 'tsx'
  | 'twig'
  | 'yaml';

export type PrismAttributes = {
  'data-prismjs-copy': string;
  'data-prismjs-copy-success': string;
  'data-prismjs-copy-error': string;
  'data-prismjs-color-scheme-dark': string;
  'data-prismjs-color-scheme-light': string;
};

export type UsePrismProps = {
  language?: PrismLanguage;
  plugins: OptionalPrismPlugin[];
};

export type UsePrismReturn = {
  attributes: PrismAttributes;
  className: string;
};

/**
 * Import and configure all given Prism plugins.
 *
 * @param {PrismPlugin[]} plugins - The Prism plugins to activate.
 */
const loadPrismPlugins = async (plugins: PrismPlugin[]) => {
  for (const plugin of plugins) {
    try {
      if (plugin === 'color-scheme') {
        await import(`../plugins/prism-${plugin}`);
      } else {
        await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`);
      }

      if (plugin === 'autoloader') {
        Prism.plugins.autoloader.languages_path = '/prism/';
      }
    } catch (error) {
      console.error('usePrism: an error occurred while loading Prism plugins.');
      console.error(error);
    }
  }
};

/**
 * Use Prism and its plugins.
 *
 * @param {UsePrismProps} props - An object of options.
 * @returns {UsePrismReturn} An object of data.
 */
export const usePrism = ({
  language,
  plugins,
}: UsePrismProps): UsePrismReturn => {
  /**
   * The order matter. Toolbar must be loaded before some other plugins.
   */
  const defaultPlugins: DefaultPrismPlugin[] = useMemo(
    () => [
      'toolbar',
      'autoloader',
      'show-language',
      'copy-to-clipboard',
      'color-scheme',
      'match-braces',
      'normalize-whitespace',
    ],
    []
  );

  useEffect(() => {
    loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => {
      Prism.highlightAll();
    });
  }, [defaultPlugins, plugins]);

  const defaultClassName = 'match-braces';
  const languageClassName = language ? `language-${language}` : '';
  const pluginsClassName = plugins.join(' ');
  const className = `${defaultClassName} ${pluginsClassName} ${languageClassName}`;

  const intl = useIntl();
  const copyText = intl.formatMessage({
    defaultMessage: 'Copy',
    description: 'usePrism: copy button text (not clicked)',
    id: '6GySNl',
  });
  const copiedText = intl.formatMessage({
    defaultMessage: 'Copied!',
    description: 'usePrism: copy button text (clicked)',
    id: 'nsw6Th',
  });
  const errorText = intl.formatMessage({
    defaultMessage: 'Use Ctrl+c to copy',
    description: 'usePrism: copy button error text',
    id: 'lKhTGM',
  });
  const darkTheme = intl.formatMessage({
    defaultMessage: 'Dark Theme 🌙',
    description: 'usePrism: toggle dark theme button text',
    id: 'QLisK6',
  });
  const lightTheme = intl.formatMessage({
    defaultMessage: 'Light Theme 🌞',
    description: 'usePrism: toggle light theme button text',
    id: 'hHVgW3',
  });
  const attributes = {
    'data-prismjs-copy': copyText,
    'data-prismjs-copy-success': copiedText,
    'data-prismjs-copy-error': errorText,
    'data-prismjs-color-scheme-dark': darkTheme,
    'data-prismjs-color-scheme-light': lightTheme,
  };

  return {
    attributes,
    className,
  };
};
c }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */</style><div class="highlight"><pre><span></span>import { FunctionComponent } from &#39;react&#39;;

const Main: FunctionComponent = ({ children }) =&gt; {
  return &lt;main id=&quot;main&quot;&gt;{children}&lt;/main&gt;;
};

export default Main;
</pre></div>