import React, { useState } from 'react';
import ReactPlayer from 'react-player';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import { useDomRect } from '../../tools/dimensions/reportRect';
import Icon from '../icon/Icon';
import { COLORPICKER, INPUT, TEXTAREA } from '../../constants/schemaComponentTypes';
import { useCarouselA11yVisible } from '../../tools/a11y/useCarouselA11yVisible';
import { i18nShape } from '../../constants/prop-types/i18n';
import './styles/CarouselSlideVideo.scss';

const n = createNamespace('CarouselSlideVideo');

export const VIDEO_SLIDE_TYPE = 'video-slide';

const CarouselSlideVideo = ({
    data: {
        title,
        blurb,
        imageUrl,
        videoUrl,
        titleColor,
        textColor,
        backgroundColor,
        i18n: i18nProp
    },
    settings
}) => {
    const [rect, contentRef] = useDomRect();
    const [, tabIndex] = useCarouselA11yVisible(contentRef);
    const i18n = { ...CarouselSlideVideo.defaultProps.data.i18n, ...i18nProp };

    const [isVideoPlaying, setIsVideoPlaying] = useState(false);
    const { width = 300, height = 300 } = rect;

    const componentVariables = {
        height: settings.height ? `${settings.height}px` : null,
        'text-color': textColor,
        'title-color': titleColor,
        'background-color': backgroundColor,
        'image-url': `url("${imageUrl}")`
    };

    let content = null;

    if (isVideoPlaying) {
        content = (
            <ReactPlayer
                url={videoUrl}
                playing
                width={width}
                heigth={height}
                onEnded={() => setIsVideoPlaying(false)}
            />
        );
    } else {
        content = (
            <React.Fragment>
                <div {...n('content').withTestId().props}>
                    {title && (
                        <div {...n('text').props}>
                            <div {...n('title').withTestId().props}>
                                {title}
                            </div>
                            <Icon type="play" width="28px" fill={textColor || 'black'} {...n('playIcon').props} />
                            <div {...n('description').withTestId().props}>{blurb}</div>
                        </div>
                    )}
                </div>
                <button {...n('btnPlay').props} type="button" onClick={() => setIsVideoPlaying(true)} tabIndex={tabIndex}>
                    <span {...n('btnPlayText').props}>{i18n.play}</span>
                </button>
            </React.Fragment>
        );
    }

    return (
        <div {...n('wrapper').withTestId().withVariables(componentVariables).props} ref={contentRef}>
            {content}
        </div>
    );
};


CarouselSlideVideo.schema = () => ({
    name: 'Carousel Slide Video',
    iconName: 'carousel',
    form: {
        title: {
            title: 'uieditor.sfbComponent.carouselSlideVideo.title.title',
            type: INPUT,
            defaultValue: 'uieditor.sfbComponent.carouselSlideVideo.title.defaultValue'
        },
        blurb: {
            title: 'uieditor.sfbComponent.carouselSlideVideo.blurb.title',
            type: TEXTAREA,
            defaultValue: 'uieditor.sfbComponent.carouselSlideVideo.blurb.defaultValue'
        },
        titleColor: {
            title: 'uieditor.sfbComponent.carouselSlideVideo.titleColor.title',
            type: COLORPICKER
        },
        textColor: {
            title: 'uieditor.sfbComponent.carouselSlideVideo.textColor.title',
            type: COLORPICKER
        },
        imageUrl: {
            title: 'uieditor.sfbComponent.carouselSlideVideo.imageUrl.title',
            type: INPUT,
            defaultValue: ''
        },
        videoUrl: {
            title: 'uieditor.sfbComponent.carouselSlideVideo.videoUrl.title',
            type: INPUT,
            defaultValue: ''
        },
        backgroundColor: {
            title: 'uieditor.sfbComponent.carouselSlideVideo.backgroundColor.title',
            defaultValue: '#eee',
            type: COLORPICKER
        }
    }
});


CarouselSlideVideo.propTypes = {
    settings: PropTypes.shape({
        height: PropTypes.number
    }),
    data: PropTypes.shape({
        name: PropTypes.string,
        title: PropTypes.string,
        blurb: PropTypes.string,
        imageUrl: PropTypes.string,
        videoUrl: PropTypes.string,
        titleColor: PropTypes.string,
        textColor: PropTypes.string,
        backgroundColor: PropTypes.string,
        i18n: PropTypes.shape(i18nShape)
    })
};

CarouselSlideVideo.defaultProps = {
    settings: {
    },
    data: {
        name: null,
        title: null,
        blurb: null,
        videoUrl: null,
        imageUrl: null,
        titleColor: null,
        textColor: null,
        backgroundColor: null,
        i18n: {
            play: 'Play'
        }
    }
};

export default CarouselSlideVideo;
