import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../tools/namingTools';
import Image from '../../../../atoms/image/Image';
import GridContainer from '../../../../atoms/grid-container/GridContainer';
import { DEFAULT_IMG } from '../../../../constants/images';
import { variantImageShape } from '../../../../constants/components/prop-types/product-variants';
import VariantCta from '../variant-cta/VariantCta';
import VariantPrice from '../variant-price/VariantPrice';
import { configuratorPropTypes, selectedEditionPropTypes } from '../../../../constants/prop-types/application/configurator';
import { callToActionListShape } from '../../../../constants/prop-types/application/call-to-actions';
import { getImageSrc } from '../../../../tools/images';
// IMPORTANT: (s)css should be imported after other atoms/components
import './styles/VariantSelectionPreview.scss';

const n = createNamespace('VariantSelectionPreview');

const VariantSelectionPreview = ({
    callToActions,
    configurator,
    selectedEdition,
    productName,
    variantImage,
    selectedOptions,
    isVariantEnabled,
    isCondensed
}) => {
    const {
        name = '',
        imageUrl = '',
        imageUrlSrcset = {}
    } = variantImage;

    const isValidOptionValue = optionValue => optionValue !== null && optionValue !== undefined && optionValue !== '';
    const hasUnselectedOptions = selectedOptions.some(({ optionValue }) => !isValidOptionValue(optionValue));
    const isCtaDisabled = !isVariantEnabled || hasUnselectedOptions;
    const modifiers = isCondensed ? ['condensed'] : [];

    const renderSelectedOptions = () => selectedOptions.map(({ optionName, optionValue }) => {
        const itemContent = isValidOptionValue(optionValue) ? `${optionName}: ${optionValue}` : '—';
        return (
            <li {...n('optionValue', modifiers).withTestId().props} key={optionName}>
                {itemContent}
            </li>
        );
    });

    /* FIXME: Price should be dynamic https://appdirect.jira.com/browse/PV-283 */
    const renderPrice = () => (
        <>
            <div {...n('priceLabel', modifiers).withTestId().props}>Current selection</div>
            <div {...n('priceValue', modifiers).withTestId().props}>
                {(!hasUnselectedOptions && <VariantPrice plans={selectedEdition.plans} />) || '$ --'}
            </div>
        </>
    );

    return (
        <GridContainer {...n('gridContainer', modifiers).withTestId().props}>
            <div {...n('details', modifiers).props}>
                <div {...n('thumbnailWrapper').props}>
                    <Image
                        {...n('thumbnail', modifiers).withTestId().props}
                        src={getImageSrc(imageUrl, imageUrlSrcset)}
                        alt={name}
                    />
                </div>
                <div {...n('content', modifiers).props}>
                    <h3>{productName}</h3>
                    <ul {...n('selectedOptions').withTestId().props}>
                        {renderSelectedOptions()}
                    </ul>
                    {isCondensed && renderPrice()}
                </div>
            </div>
            <div {...n('price', modifiers).withTestId().props}>
                {!isCondensed && renderPrice()}
            </div>
            {/* FIXME: CTAs should be dynamic https://appdirect.jira.com/browse/PV-154 */}
            <VariantCta
                isCtaDisabled={isCtaDisabled}
                isFullscreen={false}
                callToActions={callToActions}
                configurator={configurator}
                selectedEdition={selectedEdition}
            />
        </GridContainer>
    );
};

VariantSelectionPreview.propTypes = {
    callToActions: callToActionListShape,
    configurator: configuratorPropTypes,
    selectedEdition: selectedEditionPropTypes,
    productName: PropTypes.string,
    variantImage: PropTypes.shape(variantImageShape),
    isVariantEnabled: PropTypes.bool,
    selectedOptions: PropTypes.arrayOf(PropTypes.shape({
        optionName: PropTypes.string,
        optionValue: PropTypes.string
    })),
    isCondensed: PropTypes.bool
};

VariantSelectionPreview.defaultProps = {
    callToActions: { items: [] },
    configurator: {},
    selectedEdition: {
        name: '',
        plans: [
            {
                costs: {
                    unitPrice: [
                        {
                            usageRange: [
                                {
                                    formattedFullPriceElements: []
                                }
                            ]
                        }
                    ]
                }
            }
        ]
    },
    productName: '',
    variantImage: {
        name: '',
        imageUrl: DEFAULT_IMG,
        imageUrlSrcset: {}
    },
    isVariantEnabled: true,
    selectedOptions: [],
    isCondensed: false
};

export default VariantSelectionPreview;
