import React from 'react';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { filterBundleActions } from '../../tools/callToActions';
import { useResponsive } from '../../tools/widths/useResponsive';
import { NAMESPACES } from '../../constants/namespaces';
import TabsMenu from './TabsMenu';

export const BundleTabsMenuComponent = props => {
    const { data = {} } = props;
    const { callToActions, summary } = data;
    const bundleSummary = summary && {
        ...summary,
        logoSrc: summary.images && summary.images.length ? summary.images[0] : null
    };
    const bundleCallToActions = callToActions && {
        ...callToActions,
        items: callToActions.items && callToActions.items.length ? callToActions.items.filter(filterBundleActions) : []
    };

    const transformedProps = {
        data: {
            summary: bundleSummary,
            callToActions: bundleCallToActions
        }
    };

    const isMobile = useResponsive().largeDown;

    return isMobile && <TabsMenu {...transformedProps} />;
};

BundleTabsMenuComponent.schema = () => {
    const originalSchema = TabsMenu.schema();

    return {
        ...originalSchema,
        name: 'BundleTabMenu',
        orderableSection: [NAMESPACES.bundle],
        title: 'uieditor.sfbComponent.bundleTabMenu.title',
        form: {},
        marketplaceData: {
            summary: 'bundle.summary',
            callToActions: 'bundle.callToActions'
        }
    };
};

BundleTabsMenuComponent.propTypes = {
    data: PropTypes.shape({
        summary: PropTypes.shape({
            images: PropTypes.arrayOf(PropTypes.string),
            title: PropTypes.string
        }),
        callToActions: PropTypes.shape({
            items: PropTypes.arrayOf(
                PropTypes.shape({
                    label: PropTypes.string,
                    tooltip: PropTypes.string,
                    isPrimary: PropTypes.bool,
                    disabled: PropTypes.bool,
                    url: PropTypes.string,
                    actionType: PropTypes.string
                })
            )
        })
    })
};

BundleTabsMenuComponent.defaultProps = {
    data: {}
};

export default withListener(BundleTabsMenuComponent);
