// @flow

import React from 'react';
import type { Node } from 'react';
import classNames from 'classnames';
import { inject, observer } from 'mobx-react';
import { type Store } from '../accordionStore/accordionStore';

const defaultProps = {
    className: 'accordion__body',
    hideBodyClassName: 'accordion__body--hidden',
};

type AccordionItemBodyProps = {
    children: Node,
    className: string,
    hideBodyClassName: string,
    accordionStore: Store,
    uuid: string | number,
};

const AccordionItemBody = (props: AccordionItemBodyProps) => {
    const { uuid, children, className, hideBodyClassName } = props;
    const { items, accordion } = props.accordionStore;
    const foundItem = items.find(item => item.uuid === uuid);
    if (!foundItem) return null;

    const { expanded } = foundItem;
    const id = `accordion__body-${uuid}`;
    const role = accordion ? 'tabpanel' : null;

    const bodyClass = classNames(className, {
        [hideBodyClassName]: !expanded,
    });
    const ariaHidden = !expanded;
    return (
        <div
            id={id}
            className={bodyClass}
            aria-hidden={ariaHidden}
            aria-labelledby={id.replace(
                'accordion__body-',
                'accordion__title-',
            )}
            role={role}
        >
            {children}
        </div>
    );
};

AccordionItemBody.defaultProps = defaultProps;

export default inject('accordionStore', 'uuid')(observer(AccordionItemBody));

@@ -848,16 +848,71 @@
 uuid%7D%60;%0A
+    const ariaLabelledby = %60accordion__title-$%7Buuid%7D%60;%0A
     cons
@@ -1230,106 +1230,22 @@
 by=%7B
-id.replace(%0A                'accordion__body-',%0A                'accordion__title-',%0A            )
+ariaLabelledby
 %7D%0A  

Replace uneccessary .replace syntax in aria-labelledby attribute