import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { IconButton } from '@fluentui/react';
import Markdown from 'markdown-to-jsx';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useGoBack, useGoHome, useGuidance, useHandleClick } from './Guidance.hooks.js';
import { ButtonWrapper, Container, Icon, icons } from './Guidance.styles.js';
export const Guidance = /*#__PURE__*/ memo(function Guidance({ name ='' , index ,  }) {
    const markdownContainer = useRef(null);
    const guidance = useGuidance(index);
    const [_name, setName] = useState([
        name
    ]);
    if (name !== _name[0]) {
        setName([
            name
        ]);
    }
    const handleClick = useHandleClick(setName);
    const goHome = useGoHome(name, setName);
    const goBack = useGoBack(setName);
    const preProcess = useCallback((text)=>{
        const r = /(?<=##.*?\n)([\s\S]*)/g;
        const content = text.replace(r, `<div className="details">$1</div>`);
        return content;
    }, []);
    const md = useMemo(()=>{
        const text = guidance(_name[_name.length - 1] || '');
        return preProcess(text);
    }, [
        _name,
        guidance,
        preProcess
    ]);
    useEffect(()=>{
        if (markdownContainer?.current) {
            const links = markdownContainer.current.querySelectorAll('a');
            links.forEach((link)=>{
                link.addEventListener('click', (e)=>{
                    e.preventDefault();
                    handleClick(e.target.href);
                });
            });
        }
    }, [
        handleClick,
        _name,
        markdownContainer
    ]);
    const handleHeaderClick = useCallback((event)=>{
        const target = event.target.nodeName === 'H2' ? event.target : event.target.closest('h2');
        if (target.classList.contains('active')) {
            target.classList.remove('active');
        } else {
            target.classList.add('active');
        }
    }, []);
    const H2Component = useCallback(({ children , ...props })=>{
        return /*#__PURE__*/ _jsxs("h2", {
            ...props,
            children: [
                children,
                /*#__PURE__*/ _jsx(IconButton, {
                    onClick: handleHeaderClick,
                    "aria-label": "Emoji",
                    iconProps: {
                        iconName: 'AddTo'
                    }
                })
            ]
        });
    }, [
        handleHeaderClick
    ]);
    const options = {
        overrides: {
            h2: {
                component: H2Component
            }
        }
    };
    return /*#__PURE__*/ _jsxs(Container, {
        ref: markdownContainer,
        children: [
            /*#__PURE__*/ _jsxs(ButtonWrapper, {
                children: [
                    _name.length > 2 ? /*#__PURE__*/ _jsx(Icon, {
                        onClick: goBack,
                        iconProps: icons.back,
                        "aria-label": "Back"
                    }) : null,
                    _name.length > 1 ? /*#__PURE__*/ _jsx(Icon, {
                        onClick: goHome,
                        iconProps: icons.home,
                        "aria-label": "Home"
                    }) : null
                ]
            }),
            /*#__PURE__*/ _jsx(Markdown, {
                options: options,
                children: md
            })
        ]
    });
});
