import React from 'react';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { replacePlaceholders } from '../../tools/stringTools';
import { createNamespace } from '../../tools/namingTools';
import { TEXTAREA, GROUP_HEADER, INPUT, IMAGE_UPLOADER } from '../../constants/schemaComponentTypes';
import ButtonIcon from '../../atoms/button-icon/ButtonIcon';
import Icon from '../../atoms/icon/Icon';
import Image from '../../atoms/image/Image';

import './styles/OrderConfirmation.scss';

const n = createNamespace('OrderConfirmation');

export const OrderConfirmationComponent = ({
    data: {
        links,
        user,
        order,
        i18n
    },
    settings
}) => {
    const orderInfo = {
        ...user,
        orderId: order && order.id
    };

    const { title: settingTitle, message: settingMessage, icon: settingIcon } = settings;

    const title = settingTitle ? replacePlaceholders(settingTitle, orderInfo) : i18n.customerName;
    const message = settingMessage ? replacePlaceholders(settingMessage, orderInfo) : `${i18n.confirmationOrderId} ${i18n.customerEmail}`;

    const buttons = links && Object.keys(links).reduce((accumulator, key) => {
        const button = links[key];

        if (typeof button.isVisible === 'undefined' || button.isVisible) {
            accumulator.push(Object.assign(button, {
                key,
                title: settings[key] || button.title,
                isLink: key === 'assignProducts',
                icon: settings[`${key}Icon`]
            }));
        }

        return accumulator;
    }, []);

    const renderHeaderIcon = () => {
        const iconProps = { ...n('icon').props };

        return settingIcon && settingIcon.url ? (
            <Image {...iconProps} src={settingIcon.url} />
        ) : (
            <Icon {...iconProps} type="check" />
        );
    };

    const renderButton = ({ key, isLink, url, icon, title: buttonTitle }) => (
        <ButtonIcon
            key={key}
            type={isLink ? 'link' : 'button'}
            extraClass={n('cta', isLink && 'link').props.className}
            theme={isLink ? 'primary' : 'card'}
            size="large"
            url={url}
            iconSrc={icon && icon.url}
            wide
        >
            {buttonTitle}
        </ButtonIcon>
    );

    return (
        <section>
            <div {...n('container').withTestId().props}>
                <div {...n('heading').props}>
                    {renderHeaderIcon()}
                    {title && <h1 {...n('title').withTestId().props}>{title}</h1>}
                    {message && <p {...n('message').withTestId().props}>{message}</p>}
                </div>
                {buttons && buttons.length ? (
                    <div {...n('btnContainer').props}>
                        {buttons.map(renderButton)}
                    </div>
                ) : null}
            </div>
        </section>
    );
};

OrderConfirmationComponent.propTypes = {
    data: PropTypes.shape({
        links: PropTypes.shape({
            viewApps: PropTypes.shape({
                title: PropTypes.string,
                url: PropTypes.string
            }),
            continueShopping: PropTypes.shape({
                title: PropTypes.string,
                url: PropTypes.string
            }),
            assignProducts: PropTypes.shape({
                title: PropTypes.string,
                url: PropTypes.string,
                isVisible: PropTypes.bool
            })
        }),
        user: PropTypes.shape({
            customerName: PropTypes.string,
            customerEmail: PropTypes.string
        }),
        order: PropTypes.shape({
            id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
        }),
        i18n: PropTypes.shape({
            customerName: PropTypes.string,
            confirmationOrderId: PropTypes.string,
            customerEmail: PropTypes.string
        })
    }),
    settings: PropTypes.shape({
        icon: PropTypes.shape({
            filename: PropTypes.string,
            type: PropTypes.oneOf([IMAGE_UPLOADER]),
            url: PropTypes.string
        }),
        title: PropTypes.string,
        message: PropTypes.string
    })
};
OrderConfirmationComponent.schema = () => ({
    name: 'OrderConfirmation',
    title: 'uieditor.sfbComponent.orderConfirmation.title',
    iconName: '',
    form: {
        icon: {
            type: IMAGE_UPLOADER,
            title: 'uieditor.sfbComponent.orderConfirmation.icon.title',
            placeholder: 'uieditor.sfbComponent.orderConfirmation.icon.placeholder',
            defaultValue: {
                filename: 'icon',
                type: 'IMAGE_UPLOADER',
                url: ''
            }
        },
        title: {
            type: TEXTAREA,
            title: 'uieditor.sfbComponent.orderConfirmation.title.title',
            placeholder: 'uieditor.sfbComponent.orderConfirmation.title.placeholder',
            defaultValue: 'Thanks for your purchase, {customerName}.'
        },
        message: {
            type: TEXTAREA,
            title: 'uieditor.sfbComponent.orderConfirmation.message.title',
            placeholder: 'uieditor.sfbComponent.orderConfirmation.message.placeholder',
            defaultValue: 'Your purchase {orderId} is processing. You will receive an email with a confirmation shortly at {customerEmail}.'
        },
        header: {
            type: GROUP_HEADER,
            title: 'uieditor.sfbComponent.orderConfirmation.viewApps.title',
            symbol: 'style'
        },
        viewApps: {
            type: INPUT,
            title: 'uieditor.sfbComponent.orderConfirmation.viewAppsLabel.title',
            placeholder: 'uieditor.sfbComponent.orderConfirmation.viewAppsLabel.placeholder',
            defaultValue: 'View my apps'
        },
        viewAppsIcon: {
            type: IMAGE_UPLOADER,
            title: 'uieditor.sfbComponent.orderConfirmation.viewAppsIcon.title',
            placeholder: 'uieditor.sfbComponent.orderConfirmation.viewAppsIcon.placeholder',
            defaultValue: {
                filename: 'icon',
                type: 'IMAGE_UPLOADER',
                url: ''
            }
        },
        header2: {
            type: GROUP_HEADER,
            title: 'uieditor.sfbComponent.orderConfirmation.continueShopping.title',
            symbol: 'style'
        },
        continueShopping: {
            type: INPUT,
            title: 'uieditor.sfbComponent.orderConfirmation.continueShoppingLabel.title',
            placeholder: 'uieditor.sfbComponent.orderConfirmation.continueShoppingLabel.placeholder',
            defaultValue: 'Continue Shopping'
        },
        continueShoppingIcon: {
            type: IMAGE_UPLOADER,
            title: 'uieditor.sfbComponent.orderConfirmation.continueShoppingIcon.title',
            placeholder: 'uieditor.sfbComponent.orderConfirmation.continueShoppingIcon.placeholder',
            defaultValue: {
                filename: 'icon',
                type: 'IMAGE_UPLOADER',
                url: ''
            }
        },
        header3: {
            type: GROUP_HEADER,
            title: 'uieditor.sfbComponent.orderConfirmation.assignProducts.title',
            symbol: 'style'
        },
        assignProducts: {
            type: INPUT,
            title: 'uieditor.sfbComponent.orderConfirmation.assignProductsLabel.title',
            placeholder: 'uieditor.sfbComponent.orderConfirmation.assignProductsLabel.placeholder',
            defaultValue: 'Assign products'
        },
        assignProductsIcon: {
            type: IMAGE_UPLOADER,
            title: 'uieditor.sfbComponent.orderConfirmation.assignProductsIcon.title',
            placeholder: 'uieditor.sfbComponent.orderConfirmation.assignProductsIcon.placeholder',
            defaultValue: {
                filename: 'icon',
                type: 'IMAGE_UPLOADER',
                url: ''
            }
        }
    },
    marketplaceData: {
        links: 'orderConfirmation.links',
        i18n: 'orderConfirmation.i18n'
    }
});

OrderConfirmationComponent.defaultProps = {
    data: {
        links: null,
        user: null,
        order: null,
        i18n: {
            customerName: 'Thanks for your purchase, {customerName}.',
            confirmationOrderId: 'Your purchase {orderId} is processing.',
            customerEmail: 'You will receive an email with a confirmation shortly at {customerEmail}.'
        }
    },
    settings: {}
};

export default withListener(OrderConfirmationComponent);
