import React from 'react';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { generateUniqueID } from '../../tools/helpers';
import { createNamespace } from '../../tools/namingTools';
import { DROPDOWN } from '../../constants/schemaComponentTypes';
import { NAMESPACES } from '../../constants/namespaces';
import { profilePageDataStore } from '../../store/profilePageData';
import Button from '../../atoms/button/Button';
import Grid from '../../atoms/grid/Grid';
import Icon from '../../atoms/icon/Icon';
import FeatureCard from '../../atoms/feature-card/FeatureCard';
import './styles/TopFeatures.scss';

const n = createNamespace('TopFeatures');

const renderShowMore = ({
    color: buttonColor,
    href,
    alternateLabel: buttonText,
    a11yLabel
}) => {
    if (!href) {
        return null;
    }

    const buttonProps = {
        type: buttonColor,
        'aria-label': a11yLabel,
        onClick: e => {
            e.preventDefault();

            window.location = href;
        }
    };

    return (
        <>
            <div {...n('button', 'desktop').withE2EId('buttonDesktop').props}>
                <Button {...buttonProps}>
                    {buttonText}
                </Button>
            </div>
            <div {...n('button', 'mobile').props}>
                <Button {...buttonProps} buttonType="link">
                    {buttonText}
                    <Icon type="caretDown" {...n('buttonIcon').props} />
                </Button>
            </div>
        </>
    );
};

// @todo: change this when the dropdown allows object values
export const columnOptions = {
    one: 1,
    two: 2,
    three: 3
};

export const TopFeaturesComponent = ({ data, settings }) => {
    const settingsWithDefaults = { ...TopFeaturesComponent.defaultProps.settings, ...settings };
    const { overview } = data;
    const { benefits, callToActions, i18n: i18nFromOverview } = overview;
    const { isFeaturesLinkEnabled } = profilePageDataStore();
    const i18n = { ...TopFeaturesComponent.defaultProps.data.overview.i18n, ...i18nFromOverview };

    if (!benefits || !benefits.length) {
        return null;
    }

    const { featuresAndBenefits } = i18n;
    const { numberOfColumns } = settingsWithDefaults;
    const maxCol = columnOptions[numberOfColumns.toLowerCase()] || 2;

    const renderItem = ({ title, description, descriptionLong }, key) => (
        <div {...n('feature').withTestId().withE2EId().props} key={generateUniqueID([title, key])}>
            <FeatureCard
                title={title}
                description={descriptionLong || description}
                withHeading
            />
        </div>
    );

    return (
        <section {...n('container').withE2EId().props}>
            <h2 {...n('title').withTestId().withE2EId().props}>{featuresAndBenefits}</h2>
            <div {...n('gridWrapper').withTestId().props}>
                <Grid maxCol={maxCol} itemClass={n('item').props.className}>
                    {benefits.map(renderItem)}
                </Grid>
            </div>
            {isFeaturesLinkEnabled && callToActions && callToActions.tour && (
                <div {...n('buttonWrapper').props}>
                    {renderShowMore(callToActions.tour)}
                </div>
            )}
        </section>
    );
};

const NUMBER_COLUMNS_OPTIONS = [
    { value: 'one', label: 'uieditor.sfbComponent.topFeatures.numberOfColumns.option.one' },
    { value: 'two', label: 'uieditor.sfbComponent.topFeatures.numberOfColumns.option.two' },
    { value: 'three', label: 'uieditor.sfbComponent.topFeatures.numberOfColumns.option.three' }
];

TopFeaturesComponent.schema = () => ({
    name: 'ProductTopFeatures',
    title: 'uieditor.sfbComponent.topFeatures.title',
    anchor: 'product-section-features',
    iconName: 'special',
    orderableSection: [NAMESPACES.profile],
    form: {
        numberOfColumns: {
            title: 'uieditor.sfbComponent.topFeatures.numberOfColumns.title',
            type: DROPDOWN,
            required: false,
            defaultValue: NUMBER_COLUMNS_OPTIONS[1].value,
            options: NUMBER_COLUMNS_OPTIONS
        }
    },
    marketplaceData: {
        overview: 'application.overview'
    },
    requiredDataFunc: ({ overview: { benefits = [] } }) => (benefits && benefits.length)
});

export const topFeatureOverviewShape = {
    benefits: PropTypes.arrayOf(
        PropTypes.shape({
            title: PropTypes.string,
            description: PropTypes.string,
            descriptionLong: PropTypes.string
        })
    ),
    callToActions: PropTypes.shape({
        tour: PropTypes.shape({
            label: PropTypes.string,
            alternateLabel: PropTypes.string,
            a11yLabel: PropTypes.string,
            color: PropTypes.string,
            href: PropTypes.string
        })
    }),
    i18n: PropTypes.shape({
        featuresAndBenefits: PropTypes.string
    })
};

TopFeaturesComponent.propTypes = {
    settings: PropTypes.shape({
        numberOfColumns: PropTypes.oneOf(NUMBER_COLUMNS_OPTIONS.map(({ value }) => value))
    }),
    data: PropTypes.shape({
        overview: PropTypes.shape(topFeatureOverviewShape)
    })
};

const SETTINGS = TopFeaturesComponent.schema().form;

TopFeaturesComponent.defaultProps = {
    settings: {
        numberOfColumns: SETTINGS.numberOfColumns.defaultValue
    },
    data: {
        overview: {
            benefits: [],
            callToActions: null,
            i18n: {
                featuresAndBenefits: 'Top Features'
            }
        }
    }
};

export default withListener(TopFeaturesComponent);
