// @flow

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

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

type AccordionItemTitleState = {};

class AccordionItemTitle extends Component<
    AccordionItemTitleProps,
    AccordionItemTitleState,
> {
    static accordionElementName = 'AccordionItemTitle';

    static defaultProps = {
        className: 'accordion__title',
        hideBodyClassName: '',
    };

    handleClick = () => {
        const { uuid, accordionStore } = this.props;
        const { accordion, onChange, items } = accordionStore;
        const foundItem = items.find(item => item.uuid === uuid);
        if (!foundItem) return;

        this.props.accordionStore.setExpanded(
            foundItem.uuid,
            !foundItem.expanded,
        );

        if (accordion) {
            onChange(foundItem.uuid);
        } else {
            onChange(
                this.props.accordionStore.items
                    .filter(item => item.expanded)
                    .map(item => item.uuid),
            );
        }
    };

    handleKeyPress = (evt: SyntheticInputEvent<HTMLButtonElement>) => {
        if (evt.charCode === 13 || evt.charCode === 32) {
            this.handleClick();
        }
    };

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

        const { expanded, disabled } = foundItem;

        const id = `accordion__title-${uuid}`;
        const ariaControls = `accordion__body-${uuid}`;
        const role = accordion ? 'tab' : 'button';
        const titleClassName = classNames(className, {
            [hideBodyClassName]: hideBodyClassName && !expanded,
        });

        if (role === 'tab') {
            return (
                <div
                    id={id}
                    aria-selected={expanded}
                    aria-controls={ariaControls}
                    className={titleClassName}
                    onClick={disabled ? undefined : this.handleClick}
                    role={role}
                    tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
                    onKeyPress={this.handleKeyPress}
                    disabled={disabled}
                >
                    {children}
                </div>
            );
        }
        return (
            <div
                id={id}
                aria-expanded={expanded}
                aria-controls={ariaControls}
                className={titleClassName}
                onClick={disabled ? undefined : this.handleClick}
                role={role}
                tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
                onKeyPress={this.handleKeyPress}
                disabled={disabled}
            >
                {children}
            </div>
        );
    }
}

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

@@ -32,43 +32,27 @@
 nent
- %7D from 'react';%0Aimport type %7B Node
+, type ElementProps
  %7D f
@@ -247,52 +247,31 @@
 s = 
-%7B%0A    children: Node,%0A    className: string,
+ElementProps%3C'div'%3E & %7B
 %0A   
@@ -1579,53 +1579,136 @@
 st %7B
- uuid, children, className, hideBodyClassName
+%0A            uuid,%0A            className,%0A            hideBodyClassName,%0A            accordionStore,%0A            ...rest%0A       
  %7D =
@@ -2710,39 +2710,20 @@
     
-%3E%0A                    %7Bchildren
+    %7B...rest
 %7D%0A  
@@ -2728,37 +2728,33 @@
                 
-%3C/div
+/
 %3E%0A            );
@@ -3222,22 +3222,8 @@
 ed%7D%0A
-            %3E%0A
     
@@ -3239,16 +3239,15 @@
    %7B
-children
+...rest
 %7D%0A  
@@ -3260,13 +3260,9 @@
     
-%3C/div
+/
 %3E%0A  

Update AccordionItemTitle to respect arbitrary user-defined props