import React, { useState } from 'react';
import { head } from 'lodash';
import { Text, TouchableOpacity, View } from 'react-native';
import Accordion from 'react-native-collapsible/Accordion';
import Markdown from 'react-native-markdown-display';
import If from '../If';
import { Icon } from './styles';
const AccordionContainer = ({ StyledTitle = Text, StyledBody = Text, StyledHeader = View, StyledContent = View, data, hasIcon = false, iconUpName = 'chevron-up', iconDownName = 'chevron-down', activeIconColor, inactiveIconColor, isMarkdown = false, onChange, }) => {
    const [activeSections, setActiveSections] = useState([]);
    const isActive = (section) => {
        const element = (item) => item.title === section.title;
        const index = data.findIndex(element);
        return index.toString() === activeSections.join('');
    };
    const getIconName = (section) => isActive(section) ? iconUpName : iconDownName;
    const renderHeader = (section) => {
        return (<StyledHeader isActive={isActive(section)}>
        <StyledTitle isActive={isActive(section)}>{section.title}</StyledTitle>
        <If condition={hasIcon}>
          <Icon name={getIconName(section)} color={isActive(section) ? activeIconColor : inactiveIconColor} id={iconUpName} accessibility={isActive(section) ? 'Fechar' : 'Abrir'}/>
        </If>
      </StyledHeader>);
    };
    const renderContent = (section) => {
        return (<StyledContent>
        <If condition={isMarkdown}>
          <Markdown>{section.content}</Markdown>
        </If>
        <If condition={!isMarkdown}>
          <StyledBody>{section.content}</StyledBody>
        </If>
      </StyledContent>);
    };
    const handleChange = (activeSectionsArray) => {
        const index = head(activeSectionsArray) || 0;
        if (onChange)
            onChange(data[index].title);
        setActiveSections(activeSectionsArray);
    };
    return (<Accordion sections={data} touchableComponent={TouchableOpacity} activeSections={activeSections} renderHeader={renderHeader} renderContent={renderContent} onChange={handleChange}/>);
};
export default AccordionContainer;
//# sourceMappingURL=index.js.map