import React from 'react';
import PropTypes from 'prop-types';
import './styles/CarouselSlideImage.scss';
import { createNamespace } from '../../tools/namingTools';
import { COLORPICKER, DROPDOWN, INPUT, TEXTAREA } from '../../constants/schemaComponentTypes';
import { SMALL, MEDIUM, LARGE } from '../../constants/sizes';
import { newlineToBr } from '../../tools/stringTools';

const n = createNamespace('CarouselSlideImage');

export const IMAGE_SLIDE_TYPE = 'IMAGE_ONLY';

const IMAGE_SIZING_FILL = 'fill';
const IMAGE_SIZING_FIT = 'fit';

const CarouselSlideImage = ({
    data: {
        title,
        text,
        image,
        textColor,
        textSize,
        backgroundColor,
        imageSizing,
        slideLink
    },
    settings,
    isPreviewMode
}) => {
    const hasCallToAction = !!slideLink;
    const imageUrl = image ? image.url : '';
    const componentVariables = {
        'text-color': textColor,
        height: settings.height ? `${settings.height}px` : null,
        'mobile-height': settings.mobileHeight ? `${settings.mobileHeight}px` : null,
        'background-color': backgroundColor,
        'image-url': `url("${imageUrl}")`
    };

    const containerProps = n(
        'content',
        [imageSizing, textSize && `text-size-${textSize}`]
    ).withTestId().withVariables(componentVariables);

    const shouldRenderContentText = title || text;

    const slideContent = (
        <React.Fragment>
            { shouldRenderContentText && (
                <div {...n('text').props}>
                    {title && (
                        <div {...n('title').withTestId().props}>
                            {newlineToBr(title)}
                        </div>
                    )}
                    {text && (
                        <div {...n('description').withTestId().props}>
                            {newlineToBr(text)}
                        </div>
                    )}
                </div>
            )}
        </React.Fragment>
    );

    if (hasCallToAction && !isPreviewMode) {
        return <a {...containerProps.props} href={slideLink}>{slideContent}</a>;
    }
    return <div {...containerProps.props}>{slideContent}</div>;
};

const TEXT_SIZES_OPTIONS = [SMALL, MEDIUM, LARGE];

const IMAGE_SIZING_OPTIONS = [
    { value: IMAGE_SIZING_FILL, label: IMAGE_SIZING_FILL },
    { value: IMAGE_SIZING_FIT, label: IMAGE_SIZING_FIT }
];


CarouselSlideImage.schema = () => ({
    name: 'Carousel Slide Image',
    iconName: 'carousel',
    form: {
        title: {
            title: 'uieditor.sfbComponent.carouselSlideImage.title.title',
            type: INPUT,
            defaultValue: 'Input slide title here'
        },
        text: {
            title: 'uieditor.sfbComponent.carouselSlideImage.blurb.title',
            type: TEXTAREA,
            defaultValue: 'Input slide text here'
        },
        textColor: {
            title: 'uieditor.sfbComponent.carouselSlideImage.textColor.title',
            type: COLORPICKER
        },
        textSize: {
            title: 'uieditor.sfbComponent.carouselSlideImage.textSize.title',
            type: DROPDOWN,
            defaultValue: TEXT_SIZES_OPTIONS[0].value,
            options: TEXT_SIZES_OPTIONS,
            validation: {
                availableOptions: TEXT_SIZES_OPTIONS.map(({ value }) => value),
                message: 'uieditor.sfbComponent.dropdown.validation.message',
                default: 'uieditor.sfbComponent.dropdown.defaultValue'
            }
        },
        imageUrl: {
            title: 'uieditor.sfbComponent.carouselSlideImage.imageUrl.title',
            type: INPUT,
            defaultValue: ''
        },
        imageSizing: {
            title: 'uieditor.sfbComponent.carouselSlideImage.imageSizing.title',
            type: DROPDOWN,
            defaultValue: IMAGE_SIZING_OPTIONS[0].value,
            options: IMAGE_SIZING_OPTIONS,
            validation: {
                availableOptions: IMAGE_SIZING_OPTIONS.map(({ value }) => value),
                message: 'uieditor.sfbComponent.dropdown.validation.message',
                default: 'uieditor.sfbComponent.dropdown.defaultValue'
            }
        },
        slideLink: {
            title: 'uieditor.sfbComponent.carouselSlideImage.url.title',
            defaultValue: '',
            type: INPUT
        },
        backgroundColor: {
            title: 'uieditor.sfbComponent.carouselSlideImage.backgroundColor.title',
            defaultValue: '#eee',
            type: COLORPICKER
        }
    }
});

CarouselSlideImage.propTypes = {
    settings: PropTypes.shape({
        height: PropTypes.number,
        mobileHeight: PropTypes.number
    }),
    data: PropTypes.shape({
        title: PropTypes.string,
        text: PropTypes.string,
        image: PropTypes.shape({
            url: PropTypes.string
        }),
        textColor: PropTypes.string,
        textSize: PropTypes.string,
        backgroundColor: PropTypes.string,
        imageSizing: PropTypes.string,
        slideLink: PropTypes.string
    }),
    isPreviewMode: PropTypes.bool
};

CarouselSlideImage.defaultProps = {
    settings: {
    },
    data: {
        title: null,
        text: null,
        image: {
            url: null
        },
        textColor: null,
        textSize: null,
        backgroundColor: null,
        imageSizing: null,
        slideLink: null
    },
    isPreviewMode: false
};

export default CarouselSlideImage;
