import React, { useCallback, useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { AppState, updateBlocklyXml, updateFileName } from "../../states/global";
import { Input, Button, Modal,message   } from "antd";
import "../../asstes/css/header.css";
import config from "../../config/config";

// Extend the Window interface to include the blockly property
declare global {
    interface Window {
        blockly: any;
    }
}
import Logo from "../../asstes/img/logo.png"
import Share from "../../asstes/icon/share.png"
import Delete from "../../asstes/icon/delete.png"
import Photo from "../../asstes/icon/photo.png"
import axios from "axios";

const HeaderLeft: React.FC = () => {
    const dispatch = useDispatch();
    const userInfo = useSelector((state: AppState) => state.user);
    const fileName = useSelector((state: AppState) => state.fileName);
    const [value, setValue] = useState("");
    const [xml, setXml] = useState("");
    const [deleteModalVisible, setDeleteModalVisible] = useState(false);
    const cloudUrl = config.clouUrl;
    const [messageApi, contextHolder] = message.useMessage();
    const blocklyXml = useSelector((state: AppState) => state.blocklyXml);
    const blockLength = useSelector((state: AppState) => state.blockLength);

    useEffect(() => {
        setValue(fileName);
        getBlocklyXml()
    }, [blocklyXml, fileName]);

    const getBlocklyXml = useCallback(() => {
        // console.log("getBlocklyXml",blocklyXml);
        setXml(blocklyXml);
    }, [blocklyXml]);

    const clickShare = () => {
        // console.log("share", userInfo);
        if(JSON.stringify(userInfo) !== "{}" && userInfo.username) {
            let data = {
                fileename: value,
                xml: blocklyXml,
            };
            axios.defaults.withCredentials = true;
            axios.post(cloudUrl + "/blockx/", data).then((res) => {
                console.log(res.data);
                if(res.data && res.data.filename){
                    let text = location.href+"&Qd=" + res.data.filename;
                    navigator.clipboard.writeText(text).then(() => {
                        messageApi.open({
                            type: "success",
                            content: "复制成功，请分享给好友！",
                        });
                    }).catch((err) => {
                        messageApi.open({
                            type: "error",
                            content: "复制失败，请手动复制！",
                        });
                    });
                }
            });
        }else{
            messageApi.open({
                type: "error",
                content: "请先登录！",
            });
        }
    };
    const clickDelete = () => {
        dispatch(updateBlocklyXml(`<xml xmlns="https://developers.google.com/blockly/xml"></xml>`));
    };
    const screenshot = async () => {
        let _href = window.location.origin + "/";
        let ws = window.blockly.svgBlockCanvas_.cloneNode(true)
        ws.removeAttribute("width");
        ws.removeAttribute("height");
        ws.removeAttribute("transform");
        let styleElem = document.createElementNS("http://www.w3.org/2000/svg", "style");
        styleElem.textContent = [".blocklySvg {", "background-color: #fff;", "outline: none;", "overflow: hidden;", "display: block;", "}", ".blocklyWidgetDiv {", "display: none;", "position: absolute;", "z-index: 100;", "}", ".injectionDiv {", "height: 100%;", "position: relative;", "}", ".blocklyNonSelectable {", "user-select: none;", "-moz-user-select: none;", "-webkit-user-select: none;", "-ms-user-select: none;", "}", ".blocklyTooltipDiv {", "background-color: #ffffc7;", "border: 1px solid #ddc;", "box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);",
            "color: #000;", "display: none;", "font-family: sans-serif;", "font-size: 9pt;", "opacity: 0.9;", "padding: 2px;", "position: absolute;", "z-index: 100000;", "}", ".blocklyResizeSE {", "cursor: se-resize;", "fill: #aaa;", "}", ".blocklyResizeSW {", "cursor: sw-resize;", "fill: #aaa;", "}", ".blocklyResizeLine {", "stroke: #888;", "stroke-width: 1;", "}", ".blocklyHighlightedConnectionPath {", "fill: none;", "stroke: #fc3;", "stroke-width: 4px;", "}", ".blocklyPathLight {", "fill: none;", "stroke-linecap: round;", "stroke-width: 1;",
            "}", ".blocklySelected>.blocklyPath {", "stroke: #fc3;", "stroke-width: 3px;", "}", ".blocklySelected>.blocklyPathLight {", "display: none;", "}", ".blocklyDragging>.blocklyPath,", ".blocklyDragging>.blocklyPathLight {", "fill-opacity: .8;", "stroke-opacity: .8;", "}", ".blocklyDragging>.blocklyPathDark {", "display: none;", "}", ".blocklyDisabled>.blocklyPath {", "fill-opacity: .5;", "stroke-opacity: .5;", "}", ".blocklyDisabled>.blocklyPathLight,", ".blocklyDisabled>.blocklyPathDark {", "display: none;", "}", ".blocklyText {",
            "cursor: default;", "fill: #fff;", "font-family: sans-serif;", "font-size: 11pt;", "}", ".blocklyTextCode {", "  font-family: monospace;", "}", ".blocklyNonEditableText>text {", "pointer-events: none;", "}", ".blocklyNonEditableText>rect,", ".blocklyEditableText>rect {", "fill: #fff;", "fill-opacity: .6;", "}", ".blocklyNonEditableText>text,", ".blocklyEditableText>text {", "fill: #000;", "}", ".blocklyEditableText:hover>rect {", "stroke: #fff;", "stroke-width: 2;", "}", ".blocklyBubbleText {", "fill: #000;", "}", ".blocklyFlyoutButton {",
            "fill: #888;", "cursor: default;", "}", ".blocklyFlyoutButtonShadow {", "fill: #666;", "}", ".blocklyFlyoutButton:hover {", "fill: #aaa;", "}", ".blocklyFlyoutLabel {", "cursor: default;", "}", ".blocklyFlyoutLabelBackground {", "opacity: 0;", "}", ".blocklyFlyoutLabelText {", "fill: #000;", "}", ".blocklyFlyoutLabelText:hover {", "fill: #aaa;", "}", ".blocklySvg text {", "user-select: none;", "-moz-user-select: none;", "-webkit-user-select: none;", "cursor: inherit;", "}", ".blocklyHidden {", "display: none;", "}", ".blocklyFieldDropdown:not(.blocklyHidden) {",
            "display: block;", "}", ".blocklyIconGroup {", "cursor: default;", "}", ".blocklyIconGroup:not(:hover),", ".blocklyIconGroupReadonly {", "opacity: .6;", "}", ".blocklyIconShape {", "fill: #00f;", "stroke: #fff;", "stroke-width: 1px;", "}", ".blocklyIconSymbol {", "fill: #fff;", "}", ".blocklyMinimalBody {", "margin: 0;", "padding: 0;", "}", ".blocklyCommentTextarea {", "background-color: #ffc;", "border: 0;", "margin: 0;", "padding: 2px;", "resize: none;", "}", ".blocklyHtmlInput {", "border: none;", "border-radius: 4px;", "font-family: sans-serif;",
            "height: 100%;", "margin: 0;", "outline: none;", "padding: 0 1px;", "width: 100%", "}", ".blocklyMainBackground {", "stroke-width: 1;", "stroke: #c6c6c6;", "}", ".blocklyMutatorBackground {", "fill: #fff;", "stroke: #ddd;", "stroke-width: 1;", "}", ".blocklyFlyoutBackground {", "fill: #ddd;", "fill-opacity: .8;", "}", ".blocklyScrollbarBackground {", "opacity: 0;", "}", ".blocklyScrollbarHandle {", "fill: #ccc;", "}", ".blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,", ".blocklyScrollbarHandle:hover {", "fill: #bbb;",
            "}", ".blocklyZoom>image {", "opacity: .4;", "}", ".blocklyZoom>image:hover {", "opacity: .6;", "}", ".blocklyZoom>image:active {", "opacity: .8;", "}", ".blocklyFlyout .blocklyScrollbarHandle {", "fill: #bbb;", "}", ".blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,", ".blocklyFlyout .blocklyScrollbarHandle:hover {", "fill: #aaa;", "}", ".blocklyInvalidInput {", "background: #faa;", "}", ".blocklyAngleCircle {", "stroke: #444;", "stroke-width: 1;", "fill: #ddd;", "fill-opacity: .8;", "}", ".blocklyAngleMarks {",
            "stroke: #444;", "stroke-width: 1;", "}", ".blocklyAngleGauge {", "fill: #f88;", "fill-opacity: .8;", "}", ".blocklyAngleLine {", "stroke: #f00;", "stroke-width: 2;", "stroke-linecap: round;", "}", ".blocklyContextMenu {", "border-radius: 4px;", "}", ".blocklyDropdownMenu {", "padding: 0 !important;", "}", ".blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,", ".blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {", "background: url(<<<PATH>>>/sprites.png) no-repeat -48px -16px !important;", "}",
            ".blocklyToolboxDiv {", "background-color: #ddd;", "overflow-x: visible;", "overflow-y: auto;", "position: absolute;", "}", ".blocklyTreeRoot {", "padding: 4px 0;", "}", ".blocklyTreeRoot:focus {", "outline: none;", "}", ".blocklyTreeRow {", "height: 22px;", "line-height: 22px;", "margin-bottom: 3px;", "padding-right: 8px;", "white-space: nowrap;", "}", ".blocklyHorizontalTree {", "float: left;", "margin: 1px 5px 8px 0;", "}", ".blocklyHorizontalTreeRtl {", "float: right;", "margin: 1px 0 8px 5px;", "}", '.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {',
            "margin-left: 8px;", "}", ".blocklyTreeRow:not(.blocklyTreeSelected):hover {", "background-color: #e4e4e4;", "}", ".blocklyTreeSeparator {", "border-bottom: solid #e5e5e5 1px;", "height: 0;", "margin: 5px 0;", "}", ".blocklyTreeSeparatorHorizontal {", "border-right: solid #e5e5e5 1px;", "width: 0;", "padding: 5px 0;", "margin: 0 5px;", "}", ".blocklyTreeIcon {", "background-image: url(<<<PATH>>>/sprites.png);", "height: 16px;", "vertical-align: middle;", "width: 16px;", "}", ".blocklyTreeIconClosedLtr {", "background-position: -32px -1px;",
            "}", ".blocklyTreeIconClosedRtl {", "background-position: 0px -1px;", "}", ".blocklyTreeIconOpen {", "background-position: -16px -1px;", "}", ".blocklyTreeSelected>.blocklyTreeIconClosedLtr {", "background-position: -32px -17px;", "}", ".blocklyTreeSelected>.blocklyTreeIconClosedRtl {", "background-position: 0px -17px;", "}", ".blocklyTreeSelected>.blocklyTreeIconOpen {", "background-position: -16px -17px;", "}", ".blocklyTreeIconNone,", ".blocklyTreeSelected>.blocklyTreeIconNone {", "background-position: -48px -1px;",
            "}", ".blocklyTreeLabel {", "cursor: default;", "font-family: sans-serif;", "font-size: 16px;", "padding: 0 3px;", "vertical-align: middle;", "}", ".blocklyTreeSelected .blocklyTreeLabel {", "color: #fff;", "}", ".blocklyWidgetDiv .goog-palette {", "outline: none;", "cursor: default;", "}", ".blocklyWidgetDiv .goog-palette-table {", "border: 1px solid #666;", "border-collapse: collapse;", "}", ".blocklyWidgetDiv .goog-palette-cell {", "height: 13px;", "width: 15px;", "margin: 0;", "border: 0;", "text-align: center;", "vertical-align: middle;",
            "border-right: 1px solid #666;", "font-size: 1px;", "}", ".blocklyWidgetDiv .goog-palette-colorswatch {", "position: relative;", "height: 13px;", "width: 15px;", "border: 1px solid #666;", "}", ".blocklyWidgetDiv .goog-palette-cell-hover .goog-palette-colorswatch {", "border: 1px solid #FFF;", "}", ".blocklyWidgetDiv .goog-palette-cell-selected .goog-palette-colorswatch {", "border: 1px solid #000;", "color: #fff;", "}", ".blocklyWidgetDiv .goog-menu {", "background: #fff;", "border-color: #ccc #666 #666 #ccc;", "border-style: solid;",
            "border-width: 1px;", "cursor: default;", "font: normal 13px Arial, sans-serif;", "margin: 0;", "outline: none;", "padding: 4px 0;", "position: absolute;", "overflow-y: auto;", "overflow-x: hidden;", "max-height: 50%;", "z-index: 100;", "}", ".blocklyWidgetDiv .goog-menuitem {", "color: #000;", "font: normal 13px Arial, sans-serif;", "list-style: none;", "margin: 0;", "padding: 4px 7em 4px 28px;", "white-space: nowrap;", "}", ".blocklyWidgetDiv .goog-menuitem.goog-menuitem-rtl {", "padding-left: 7em;", "padding-right: 28px;",
            "}", ".blocklyWidgetDiv .goog-menu-nocheckbox .goog-menuitem,", ".blocklyWidgetDiv .goog-menu-noicon .goog-menuitem {", "padding-left: 12px;", "}", ".blocklyWidgetDiv .goog-menu-noaccel .goog-menuitem {", "padding-right: 20px;", "}", ".blocklyWidgetDiv .goog-menuitem-content {", "color: #000;", "font: normal 13px Arial, sans-serif;", "}", ".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-accel,", ".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-content {", "color: #ccc !important;", "}", ".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-icon {",
            "opacity: 0.3;", "-moz-opacity: 0.3;", "filter: alpha(opacity=30);", "}", ".blocklyWidgetDiv .goog-menuitem-highlight,", ".blocklyWidgetDiv .goog-menuitem-hover {", "background-color: #d6e9f8;", "border-color: #d6e9f8;", "border-style: dotted;", "border-width: 1px 0;", "padding-bottom: 3px;", "padding-top: 3px;", "}", ".blocklyWidgetDiv .goog-menuitem-checkbox,", ".blocklyWidgetDiv .goog-menuitem-icon {", "background-repeat: no-repeat;", "height: 16px;", "left: 6px;", "position: absolute;", "right: auto;", "vertical-align: middle;",
            "width: 16px;", "}", ".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-checkbox,", ".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-icon {", "left: auto;", "right: 6px;", "}", ".blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,", ".blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {", "background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;", "}", ".blocklyWidgetDiv .goog-menuitem-accel {", "color: #999;", "direction: ltr;", "left: auto;", "padding: 0 6px;",
            "position: absolute;", "right: 0;", "text-align: right;", "}", ".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-accel {", "left: 0;", "right: auto;", "text-align: left;", "}", ".blocklyWidgetDiv .goog-menuitem-mnemonic-hint {", "text-decoration: underline;", "}", ".blocklyWidgetDiv .goog-menuitem-mnemonic-separator {", "color: #999;", "font-size: 12px;", "padding-left: 4px;", "}", ".blocklyWidgetDiv .goog-menuseparator {", "border-top: 1px solid #ccc;", "margin: 4px 0;", "padding: 0;", "}", ""
        ].join('');
        ws.insertBefore(styleElem, ws.firstChild);
        let bbox = window.blockly.svgBlockCanvas_.getBBox();
        let canvas = document.createElement("canvas");
        canvas.width = Math.ceil(Math.abs(bbox.x) + bbox.width + 120);
        canvas.height = Math.ceil(Math.abs(bbox.y) + bbox.height + 50);
        canvas.appendChild(ws);
        canvas.appendChild(ws);
        let ctx = canvas.getContext("2d");
        let xml = new XMLSerializer().serializeToString(ws);
        let test1 = /xlink:href="blockly\/([^\s]*)"/g;
        let arr = xml.match(test1) || [];
        if (arr.length>0) {
            let loadImage = function () {
                return new Promise((resolve) => {
                    let length = arr.length;
                    let count = 0;
                    for (let i = 0; i < length; i++) {
                        let dataURL;
                        let canvas_inline = document.createElement("canvas");
                        let ctx1 = canvas_inline.getContext("2d");
                        let image_item = new Image();
                        image_item.setAttribute("src", arr[i].replace("xlink:href=\"", _href).replace("\"", ""));
                        image_item.onload = function () {
                            //convert image to base64
                            canvas_inline.width = image_item.width;
                            canvas_inline.height = image_item.height;
                            if (ctx1) {
                                ctx1.drawImage(image_item, 0, 0);
                            } else {
                                console.error("Failed to get 2D context for canvas.");
                            }

                            dataURL = canvas_inline.toDataURL("image/png", 1);
                            xml = xml.replace(arr[i], "xlink:href=\"" + dataURL + "\"");
                            count++;
                        }
                    }
                    let timer = setInterval(() => {
                        if (count == length) {
                            clearInterval(timer);
                            return resolve(true);
                        }
                    });
                });
            }
            await loadImage();
        }
        xml = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#FFF"  width="' + canvas.width + '" height="' + canvas.height + '" viewBox="' + (bbox.x - 50) + ' ' + (bbox.y - 50) + ' ' + canvas.width + ' ' + canvas.height + '"><rect width="100%" height="100%" fill="white"></rect>' + xml + '</svg>';
        var img = new Image();
        img.setAttribute("src", 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(xml))));
        img.onload = function () {
            if (ctx) {
                ctx.drawImage(img, 5, 5);
            } else {
                console.error("Failed to get 2D context for canvas.");
            }
            var canvasdata = canvas.toDataURL("image/png", 1);
            var a = document.createElement("a");
            a.download = (value || "未命名") + ".png";
            a.href = canvasdata;
            document.body.appendChild(a);
            a.click();
        }
    };
    const saveBlockly = () => {
        // console.log("save", xml);
        const element = document.createElement("a");
        const file = new Blob([xml], { type: "text/xml" });
        element.href = URL.createObjectURL(file);
        element.download = (value || "未命名") + ".xml";
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    };

    const updateName = (name: string) => {
        setValue(name);
        dispatch(updateFileName(name));
    };
    return (
        <div className="header-left">
            {contextHolder}
            <img src={Logo} alt="logo" className="logo" />
            <Input placeholder="未命名" value={value} onChange={(e) => updateName(e.target.value)} />
            <Button onClick={() => saveBlockly()}>保存</Button>
            <img className="icon" onClick={() => clickShare()} src={Share} alt="share" />
            <img className="icon" onClick={() => setDeleteModalVisible(true)} src={Delete} alt="delete" />
            <img className="icon" onClick={() => screenshot()} src={Photo} alt="截图" />

            <Modal
                title="删除所有编程模块"
                visible={deleteModalVisible}
                onOk={() => {
                    setDeleteModalVisible(false);
                    clickDelete();
                }}
                onCancel={() => setDeleteModalVisible(false)}
                okText="确认"
                cancelText="取消"
            >
                <p>项目空间里面还有{blockLength}个编程模块，</p>
                <p>确认要删除他们吗？</p>
                
            </Modal>
        </div>
    );
};
export default HeaderLeft;