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

const n = createNamespace('CarouselSlideVideo');

export const VIDEO_SLIDE_TYPE = 'video-slide';

const CarouselSlideVideo = ({
    data: {
        title,
        blurb,
        imageUrl,
        videoUrl,
        textColor,
        backgroundColor
    },
    settings
}) => {
    const contentRef = useRef(null);

    const [isVideoPlaying, setIsVideoPlaying] = useState(false);
    const [width, setWidth] = useState(300);
    const [height, setHeight] = useState(300);

    ReportRect(contentRef, rect => {
        setWidth(rect.width);
        setHeight(rect.height);
    });

    const componentVariables = {
        height: settings.height ? `${settings.height}px` : null,
        'text-color': textColor,
        '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)}>
                    <span {...n('btnPlayText').props}>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: 'Input slide title here'
        },
        blurb: {
            title: 'uieditor.sfbComponent.carouselSlideVideo.blurb.title',
            type: TEXTAREA,
            defaultValue: 'Input slide text here'
        },
        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,
        textColor: PropTypes.string,
        backgroundColor: PropTypes.string
    })
};

CarouselSlideVideo.defaultProps = {
    settings: {
    },
    data: {
        name: null,
        title: null,
        blurb: null,
        videoUrl: null,
        imageUrl: null,
        textColor: null,
        backgroundColor: null
    }
};

export default CarouselSlideVideo;
