import React from 'react';
import PropTypes from 'prop-types';
import Image from '../../atoms/image/Image';
import { createNamespace } from '../../tools/namingTools';
import { hasScreenshots, hasDemoVideo } from '../../tools/components/ProductImageViewerUtils';
import { overviewShape, screenshotShape } from '../../constants/components/prop-types/product-image-viewer';
import { ProductDescriptionComponent, bundleLogoShape } from '../product-description/ProductDescription';
import { ProductImageViewer } from '../product-image-viewer/ProductImageViewer';
import withListener from '../withListener';
import { NAMESPACES } from '../../constants/namespaces';
import { LAYOUT_OPTIONS } from '../../constants/components/product-image-viewer';
import { isContentFromOneWorldSync } from '../../tools/contentTools';
import { getImageSrc } from '../../tools/images';
// IMPORTANT: (s)css should be imported after other atoms/components
import './styles/ProductViewerDescription.scss';

const n = createNamespace('ProductViewerDescription');

export const ProductViewerDescriptionComponent = ({
    settings,
    data: {
        screenshots,
        overview,
        startingPrice,
        hidePricings,
        addonProducts,
        bundle,
        referUrl
    }
}) => {
    const i18nOverviewWithDefaults = {
        ...ProductViewerDescriptionComponent.defaultProps.data.overview.i18n,
        ...overview.i18n
    };

    const renderOverviewImage = () => {
        if (!overview) {
            return null;
        }

        const { image, imageSrcSet, title } = overview;

        return image && (
            <div {...n('overviewImage').withTestId().props}>
                <Image
                    src={getImageSrc(image, imageSrcSet)}
                    alt={title}
                    className={n('image').withTestId().props.className}
                    isCopyRighted={isContentFromOneWorldSync(referUrl)}
                />
            </div>
        );
    };

    const showImageViewer = hasScreenshots(screenshots) || hasDemoVideo(overview);

    return (
        <section {...n('container').withE2EId().props}>
            <h2 {...n('title', 'hidden').props}>{i18nOverviewWithDefaults.overview}</h2>
            <div {...n('row').props}>
                <div {...n('imageViewer').props}>
                    {showImageViewer ? (
                        <ProductImageViewer
                            data={{ screenshots, overview }}
                            settings={settings}
                        />
                    ) : renderOverviewImage(overview)}
                </div>
                <div {...n('description').props}>
                    <ProductDescriptionComponent
                        data={{ overview, startingPrice, hidePricings, addonProducts, bundle }}
                        settings={settings}
                    />
                </div>
            </div>
        </section>
    );
};

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.oneOf(LAYOUT_OPTIONS.map(({ value }) => value)),
        hasZoom: PropTypes.bool
    }),
    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(overviewShape),
        startingPrice: PropTypes.shape({
            formattedPrice: PropTypes.string,
            frequency: PropTypes.shape({
                label: PropTypes.string
            })
        }),
        hidePricings: PropTypes.bool,
        screenshots: PropTypes.shape({
            items: PropTypes.arrayOf(
                PropTypes.shape(screenshotShape)
            )
        }),
        bundle: PropTypes.shape({
            items: PropTypes.arrayOf(bundleLogoShape)
        }),
        referUrl: PropTypes.string
    })
};

const SETTINGS = ProductViewerDescriptionComponent.schema().form;

ProductViewerDescriptionComponent.defaultProps = {
    settings: {
        isPricesVisible: SETTINGS.isPricesVisible.defaultValue,
        isAddonsVisible: SETTINGS.isAddonsVisible.defaultValue,
        layout: SETTINGS.layout.defaultValue,
        hasZoom: SETTINGS.hasZoom.defaultValue
    },
    data: {
        addonProducts: [],
        overview: {
            i18n: {
                overview: 'Overview'
            }
        },
        startingPrice: {},
        hidePricings: false,
        screenshots: {},
        bundle: {},
        referUrl: ''
    }
};

export default withListener(ProductViewerDescriptionComponent);
