import React, { useState } from 'react';
import './styles/Faq.scss';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { createNamespace } from '../../tools/namingTools';
import Collapsible from '../../atoms/collapsibleText/CollapsibleText';
import MobileNav from '../../atoms/mobileNav/MobileNav';

import { TOGGLE, COLORPICKER, SLIDER, GROUP_HEADER } from '../../constants/schemaComponentTypes';
import DesktopNav from '../../atoms/desktopNav/DesktopNav';

const n = createNamespace('Faq');

export const FaqComponent = ({
    data: {
        faqGroups: { items }
    },
    settings
}) => {
    const settingsWithDefaults = { ...FaqComponent.defaultProps.settings, ...settings };
    const {
        navBackgroundColor,
        navBorderColor,
        navSelectedColor,
        navDividerVisible,
        navPadding,
        qAndABackgroundColor,
        qAndASelectedColor,
        isExpandable,
        qAndADividerVisible,
        listPadding
    } = settingsWithDefaults;

    const [toggledSection, setToggledSection] = useState(0);
    const [selectedOption, setSelectedOption] = useState(items[0] || {});
    const { name = '', faqs = [] } = selectedOption;
    const changeQuestionList = index => {
        setSelectedOption(items[index]);
        setToggledSection('');
    };
    const navStyling = Object.assign(
        {
            padding: navPadding,
            background: navSelectedColor,
            navBackgroundColor,
            navBorderColor
        },
        navDividerVisible && { borderBottom: '1px solid #eaeaea' }
    );
    const componentVariables = {
        'background-color': qAndABackgroundColor
    };

    return (
        <div {...n('mainContainer').withVariables(componentVariables).withTestId().props}>
            <div {...n('row').props}>
                <div {...n('col', 'nav').props}>
                    <div {...n('nav', 'mobile').props}>
                        <MobileNav
                            items={items.map((item, index) => ({ label: item.name, value: String(index) }))}
                            changeQuestionList={changeQuestionList}
                            currentIndex={items.indexOf(selectedOption)}
                        />
                    </div>
                    <div {...n('nav', 'desktop').props}>
                        <DesktopNav
                            changeQuestionList={changeQuestionList}
                            items={items}
                            currentQuestionIndex={items.indexOf(selectedOption)}
                            styles={navStyling}
                            onSetIndex={setToggledSection}
                        />
                    </div>
                </div>
                <div {...n('col', 'faq').props}>
                    <h1 {...n('faqHeader').withTestId().props}>{name}</h1>
                    {faqs.map((faq, faqIndex) => (
                        <div {...n('wrapperContainer').props} key={faq.question}>
                            <Collapsible
                                onSetIndex={setToggledSection}
                                index={faqIndex}
                                isSelected={toggledSection === faqIndex}
                                faqData={faq}
                                listPadding={listPadding}
                                selectedBackgroundColor={qAndASelectedColor}
                                isExpandable={isExpandable}
                            />
                            {qAndADividerVisible && <hr {...n('divider').withTestId().props} />}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

FaqComponent.schema = () => ({
    name: 'FAQ',
    title: 'uieditor.sfbComponent.faq.title',
    iconName: 'quote',
    form: {
        spacer: {
            type: GROUP_HEADER,
            title: 'uieditor.sfbComponent.faq.menuSettings.title',
            symbol: 'menu'
        },
        navBackgroundColor: {
            title: 'uieditor.sfbComponent.faq.navBackgroundColor.title',
            defaultValue: '#ffffff',
            type: COLORPICKER,
            removeMarginBottom: true,
            removePaddingBottom: true
        },
        navBorderColor: {
            title: 'uieditor.sfbComponent.faq.navBorderColor.title',
            defaultValue: '#C3C3C3',
            type: COLORPICKER,
            removeMarginBottom: true,
            removePaddingBottom: true
        },
        navSelectedColor: {
            title: 'uieditor.sfbComponent.faq.navSelectedColor.title',
            defaultValue: '#338099',
            type: COLORPICKER
        },
        navDividerVisible: {
            labelOn: 'uieditor.sfbComponent.faq.navDividerVisible.labelOn',
            labelOff: 'uieditor.sfbComponent.faq.navDividerVisible.labelOff',
            defaultValue: true,
            type: TOGGLE
        },
        navPadding: {
            title: 'uieditor.sfbComponent.faq.navPadding.title',
            type: SLIDER,
            defaultValue: 10,
            options: {
                min: 0,
                max: 35,
                step: 1,
                unit: 'px'
            }
        },
        spacer2: {
            type: GROUP_HEADER,
            title: 'uieditor.sfbComponent.faq.q&aSettings.title',
            symbol: 'settings'
        },
        qAndABackgroundColor: {
            title: 'uieditor.sfbComponent.faq.qAndABackgroundColor.title',
            defaultValue: '#ffffff',
            type: COLORPICKER,
            removeMarginBottom: true,
            removePaddingBottom: true
        },
        qAndASelectedColor: {
            title: 'uieditor.sfbComponent.faq.qAndASelectedColor.title',
            defaultValue: '#F7F7F7',
            type: COLORPICKER
        },
        isExpandable: {
            labelOn: 'uieditor.sfbComponent.faq.isExpandable.labelOn',
            labelOff: 'uieditor.sfbComponent.faq.isExpandable.labelOff',
            defaultValue: true,
            type: TOGGLE
        },
        qAndADividerVisible: {
            labelOn: 'uieditor.sfbComponent.faq.navDividerVisible.labelOn',
            labelOff: 'uieditor.sfbComponent.faq.navDividerVisible.labelOff',
            defaultValue: true,
            type: TOGGLE
        },
        listPadding: {
            title: 'uieditor.sfbComponent.faq.listPadding.title',
            defaultValue: 10,
            type: SLIDER,
            options: {
                min: 0,
                max: 35,
                step: 1,
                unit: 'px'
            }
        }
    },
    marketplaceData: {
        faqGroups: 'faqGroups'
    }
});

const SETTINGS = FaqComponent.schema().form;

FaqComponent.propTypes = {
    data: PropTypes.shape({
        faqGroups: PropTypes.shape({
            items: PropTypes.arrayOf(PropTypes.shape({
                name: PropTypes.string,
                faqs: PropTypes.arrayOf(PropTypes.shape({
                    answer: PropTypes.string,
                    question: PropTypes.string
                }))
            }))
        })
    }),
    settings: PropTypes.shape({
        navBackgroundColor: PropTypes.string,
        navBorderColor: PropTypes.string,
        navSelectedColor: PropTypes.string,
        navDividerVisible: PropTypes.bool,
        navPadding: PropTypes.number,
        qAndABackgroundColor: PropTypes.string,
        qAndASelectedColor: PropTypes.string,
        isExpandable: PropTypes.bool,
        qAndADividerVisible: PropTypes.bool,
        listPadding: PropTypes.number
    })
};
FaqComponent.defaultProps = {
    data: {
        faqGroups: {
            items: []
        }
    },
    settings: {
        navBackgroundColor: SETTINGS.navBackgroundColor.defaultValue,
        navBorderColor: SETTINGS.navBorderColor.defaultValue,
        navSelectedColor: SETTINGS.navSelectedColor.defaultValue,
        navDividerVisible: SETTINGS.navDividerVisible.defaultValue,
        navPadding: SETTINGS.navPadding.defaultValue,
        qAndABackgroundColor: SETTINGS.qAndABackgroundColor.defaultValue,
        qAndASelectedColor: SETTINGS.qAndASelectedColor.defaultValue,
        isExpandable: SETTINGS.isExpandable.defaultValue,
        qAndADividerVisible: SETTINGS.qAndADividerVisible.defaultValue,
        listPadding: SETTINGS.listPadding.defaultValue
    }
};

export default withListener(FaqComponent);
