import React from "react"
import { BlockConfiguration } from "@wordpress/blocks"
import EditBlock from "./EditBlockComponent"

import VideoCardInterface from "../../Interfaces/VideoCardInterface"

type BlockPlayerProps = {
    videoData: VideoCardInterface
}

const EmbedBlockComponent: BlockConfiguration<BlockPlayerProps> = {
    category: "embed",
    title: 'Dailymotion Pro Embed',
    icon: <svg
        id="Dailymotion"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 96 96"
    >
        <style>{".st0{fill:currentColor;}.st1{fill:none;}"}</style>
        <g>
            <path
                id="Medium_00000036224591124208101180000008332054064288928391_"
                className="st0"
                d="M44,10H16c-1.1,0-2,0.9-2,2v12
		            c0,0.5,0.2,1,0.6,1.4l12,12C27,37.8,27.5,38,28,38h16c5.5,0,10,4.5,10,10s-4.5,10-10,10H22c-1.1,0-2,0.9-2,2v12
		            c0,0.5,0.2,1,0.6,1.4l12,12C33,85.8,33.5,86,34,86h10c21,0,38-17,38-38S65,10,44,10z M18,16.8l8,8v6.3l-8-8V16.8z M58,48
		            c0-7.7-6.3-14-14-14H30v-8h14c12.1,0,22,9.9,22,22s-9.9,22-22,22h-9.2l-8-8H44C51.7,62,58,55.7,58,48z M24,64.8l8,8v6.3l-8-8V64.8z
		            M44,82h-8v-8h8c14.3,0,26-11.7,26-26S58.3,22,44,22H28.8l-8-8H44c18.7,0,34,15.3,34,34S62.7,82,44,82z"
            />
            <rect x="0" className="st1" width="96" height="96"/>
        </g>
    </svg>,
    attributes: {
        videoData: {
            type: 'object',
            default: {
                id: "",
                private: false,
                private_id: "",
                status: "",
                thumbnail_480_url: "",
                title: "",
                name: "",
                description: "",
                duration: 0,
                created_time: 0,
                tags: [],
                "owner.screenname": "",
                "owner.avatar_60_url": ""
            }
        },
    },
    edit: EditBlock,
    save: props => {
        const { videoData } = props.attributes

        let attrsString = ''
        if (videoData.name !== undefined && videoData.name !== '') {
            attrsString += ' playlistid="' + videoData.id + '"'
        } else if (videoData.private === true) {
            attrsString += ' privatevideoid="' + videoData.private_id + '"'
        } else {
            attrsString += ' videoid="' + videoData.id + '"'
        }

        attrsString += ' videotitle="' + videoData.title + '"'

        return ('[dm-player ' + attrsString + ']')
    }
}

export default EmbedBlockComponent