import React from 'react';
import PropTypes from 'prop-types';
import './styles/ProductViewerDescription.scss';
import Image from '../../atoms/image/Image';
import { createNamespace } from '../../tools/namingTools';
import { screenshotShape } from '../../constants/components/prop-types/product-image-viewer';
import { ProductDescriptionComponent, bundleLogoShape } from '../product-description/ProductDescription';
import { ProductImageViewer } from '../product-imageViewer/ProductImageViewer';
import withListener from '../withListener';
import { NAMESPACES } from '../../constants/namespaces';

const n = createNamespace('ProductViewerDescription');

const renderSingleImage = ({ imageUrl, title }) => imageUrl && (
    <div {...n('overviewImage').withTestId().props}>
        <Image
            src={imageUrl}
            alt={title}
            className={n('image').withTestId().props.className}
        />
    </div>
);

export const ProductViewerDescriptionComponent = ({
    settings,
    data: {
        screenshots,
        overview,
        startingPrice,
        addonProducts,
        bundle
    }
}) => {
    const renderOverviewImage = () => {
        if (!overview) {
            return null;
        }

        const { image: overviewImage } = overview;

        return overviewImage && renderSingleImage({
            imageUrl: overviewImage,
            title: ''
        });
    };

    const renderImageContent = () => {
        switch (screenshots.length) {
            case 0:
                return renderOverviewImage();
            case 1:
                return renderSingleImage(screenshots[0]);
            default:
                return <ProductImageViewer data={{ screenshots, overview }} settings={settings} />;
        }
    };

    return (
        <div {...n('container').withE2EId().props}>
            <div {...n('row').props}>
                {screenshots && (
                    <div {...n('imageViewer').props}>
                        {renderImageContent()}
                    </div>
                )}
                <div {...n('description').props}>
                    <ProductDescriptionComponent
                        data={{ overview, startingPrice, addonProducts, bundle }}
                        settings={settings}
                    />
                </div>
            </div>
        </div>
    );
};

ProductViewerDescriptionComponent.schema = () => ({
    name: 'ProductDescription',
    title: 'uieditor.sfbComponent.productDescription.title',
    iconName: 'imageViewer',
    orderableSection: [NAMESPACES.profile],
    form: { ...ProductImageViewer.schema().form, ...ProductDescriptionComponent.schema().form },
    marketplaceData: {
        ...ProductImageViewer.schema().marketplaceData,
        ...ProductDescriptionComponent.schema().marketplaceData
    }
});

ProductViewerDescriptionComponent.propTypes = {
    settings: PropTypes.shape({
        isPricesVisible: PropTypes.bool,
        isAddonsVisible: PropTypes.bool,
        layout: PropTypes.string
    }),
    data: PropTypes.shape({
        addonProducts: PropTypes.arrayOf(
            PropTypes.shape({
                name: PropTypes.string,
                edition: PropTypes.arrayOf(
                    PropTypes.shape({
                        plans: PropTypes.arrayOf(
                            PropTypes.shape({
                                costs: PropTypes.shape({
                                    unitPrice: PropTypes.arrayOf(
                                        PropTypes.shape({
                                            usageRange: PropTypes.arrayOf(
                                                PropTypes.shape({
                                                    formattedFullPriceElements: PropTypes.arrayOf(PropTypes.string)
                                                })
                                            )
                                        })
                                    )
                                })
                            })
                        )
                    })
                )
            })
        ),
        overview: PropTypes.shape({
            title: PropTypes.string,
            description: PropTypes.string,
            image: PropTypes.string,
            pricingUrl: PropTypes.string
        }),
        startingPrice: PropTypes.shape({
            formattedPrice: PropTypes.string,
            frequency: PropTypes.shape({
                label: PropTypes.string
            })
        }),
        screenshots: PropTypes.arrayOf(
            PropTypes.shape(screenshotShape)
        ),
        bundle: PropTypes.shape({
            items: PropTypes.arrayOf(bundleLogoShape)
        })
    })
};

const SETTINGS = ProductViewerDescriptionComponent.schema().form;

ProductViewerDescriptionComponent.defaultProps = {
    settings: {
        isPricesVisible: SETTINGS.isPricesVisible.defaultValue,
        isAddonsVisible: SETTINGS.isAddonsVisible.defaultValue,
        layout: SETTINGS.layout.defaultValue
    },
    data: {
        addonProducts: [],
        overview: {},
        startingPrice: {},
        screenshots: [],
        bundle: {}
    }
};

export default withListener(ProductViewerDescriptionComponent);
