import React, { useState, useEffect } from "react";
import { Modal, Row, Col, Button } from "antd";
import '../../../asstes/css/header.css'
import { useSelector } from "react-redux";

import AI from "./ai";
import IOT from "./iot";
import Robot from "./robot";
import Science from "./science";
import Game from "./game";
import AR from "./ar";

import labsImg from "../../../asstes/icon/labs.png";
import deepLearningImg from "../../../asstes/img/AppCenter_ai_teachableMachine.jpg";
import emotionImg from "../../../asstes/img/AppCenter_ai_emotion.jpg";
import gestureImg from "../../../asstes/img/AppCenter_ai_gesture_recognition.jpg";
import objectImg from "../../../asstes/img/object_recognition_header.jpg";
import postureImg from "../../../asstes/img/posenet_recogition.png";
import discerningEyeImg from "../../../asstes/img/tm_with_pose.jpg";
import speechImg from "../../../asstes/img/AppCenter_ai_speech.jpg";
import { use } from "i18next";

interface dispositionType {
    title: string;
    content: string;
    img: string;
    system: string;
    resolution: string;
    memoryCapacity: string;
    HardDisk: string;
    GraphicsCard: string;
    camera: boolean;
    microphone: boolean;
    iframeSrc: string;
}

const labs: React.FC = () => {
    const domainName = location.href.indexOf('hk') > 0 ? true : false
    const userInfo = useSelector((state: any) => state.user);
    const [active, setActive] = useState(0);
    const [labsVisible, setLabsVisible] = useState(false);
    const [cardVisible, setCardVisible] = useState(false);
    const [cardTitle, setCardTitle] = useState("");
    const [disposition, setDisposition] = useState({} as dispositionType);
    const [dispositionActive, setDispositionActive] = useState(false);
    const iframeRef = React.useRef<HTMLIFrameElement>(null);

    const dispositionList = [
        {
            title: "深度学习机器",
            content: "机器人发展的趋势是人工智能化，深度学习是智能机器人的前沿技术，也是机器学习领域的新课题。深度学习技术被广泛运用于农业、工业、军事、航空等领域，与机器让人的有机结合能设计出具有高工作效率、高实时性、高精确度的智能机器人。",
            img: deepLearningImg,
            system: "Windows (>Windows7), macOS (>10.11)",
            resolution: "1440*768",
            memoryCapacity: "8GB-16GB",
            HardDisk: "256GB-512GB",
            GraphicsCard: "650M",
            camera: true,
            microphone: false,
            iframeSrc: domainName ? "https://ai-demos.cocorobo.hk/teachable-machine-2/public/" : "https://ai-demos.cocorobo.cn/teachable-machine-2/public/"
        },
        {
            title: "情绪识别",
            content: "情绪识别发展的趋势是人工智能化，情绪识别是智能识别的前沿技术，也是识别领域的新课题。情绪识别技术被广泛运用于农业、工业、军事、航空等领域。",
            img: emotionImg,
            system: "Windows (>Windows7), macOS (>10.11)",
            resolution: "1440*768",
            memoryCapacity: "8GB-16GB",
            HardDisk: "256GB-512GB",
            GraphicsCard: "650M",
            camera: true,
            microphone: false,
            iframeSrc: domainName ? "https://beta.ai-demos.cocorobo.hk/labs/emotion-cloud/index.html" : "https://beta.ai-demos.cocorobo.cn/labs/emotion-cloud/index.html"
        },
        {
            title: "手势识别",
            content: "手势识别发展的趋势是人工智能化，手势识别是智能识别的前沿技术，也是识别领域的新课题。手势识别技术被广泛运用于农业、工业、军事、航空等领域。",
            img: gestureImg,
            system: "Windows (>Windows7), macOS (>10.11)",
            resolution: "1440*768",
            memoryCapacity: "8GB-16GB",
            HardDisk: "256GB-512GB",
            GraphicsCard: "650M",
            camera: true,
            microphone: false,
            iframeSrc: domainName ? "https://beta.ai-demos.cocorobo.hk/labs/gesture-cloud/index.html" : "https://beta.ai-demos.cocorobo.cn/labs/gesture-cloud/index.html"
        },
        {
            title: "物体识别",
            content: "物体识别发展的趋势是人工智能化，物体识别是智能识别的前沿技术，也是识别领域的新课题。物体识别技术被广泛运用于农业、工业、军事、航空等领域。",
            img: objectImg,
            system: "Windows (>Windows7), macOS (>10.11)",
            resolution: "1440*768",
            memoryCapacity: "8GB-16GB",
            HardDisk: "256GB-512GB",
            GraphicsCard: "650M",
            camera: true,
            microphone: false,
            iframeSrc: domainName ? "https://ai-demos.cocorobo.hk/object-detection-2/" : "https://ai-demos.cocorobo.cn/object-detection-2/"
        },
        {
            title: "姿态识别",
            content: "姿态识别发展是人工智能发展的大趋势，姿态识别运用了许多智能识别的前沿技术，是识别领域的新课题。姿态识别技术被广泛运用于多中领域",
            img: postureImg,
            system: "Windows (>Windows7), macOS (>10.11)",
            resolution: "1440*768",
            memoryCapacity: "8GB-16GB",
            HardDisk: "256GB-512GB",
            GraphicsCard: "650M",
            camera: true,
            microphone: false,
            iframeSrc: domainName ? "https://ai-demos.cocorobo.hk/posenet-2/demos/dist/" : "https://ai-demos.cocorobo.cn/posenet-2/demos/dist/"
        },
        {
            title: "慧眼识人",
            content: "机器人发展的趋势是人工智能化，深度学习是智能机器人的前沿技术，也是机器学习领域的新课题。深度学习技术被广泛运用于农业、工业、军事、航空等领域，与机器让人的有机结合能设计出具有高工作效率、高实时性、高精确度的智能机器人。",
            img: discerningEyeImg,
            system: "Windows (>Windows7), macOS (>10.11)",
            resolution: "1440*768",
            memoryCapacity: "8GB-16GB",
            HardDisk: "256GB-512GB",
            GraphicsCard: "650M",
            camera: true,
            microphone: false,
            iframeSrc: domainName ? "https://ai-demos.cocorobo.hk/teachable-machine-pose-recognition-2/public/" : "https://ai-demos.cocorobo.cn/teachable-machine-pose-recognition-2/public/"
        },
        {
            title: "语音识别",
            content: "语音识别发展的趋势是人工智能化，语音识别是智能识别的前沿技术，也是识别领域的新课题。语音识别技术被广泛运用于农业、工业、军事、航空等领域。",
            img: speechImg,
            system: "Windows (>Windows7), macOS (>10.11)",
            resolution: "1440*768",
            memoryCapacity: "8GB-16GB",
            HardDisk: "256GB-512GB",
            GraphicsCard: "650M",
            camera: false,
            microphone: true,
            iframeSrc: domainName ? "https://beta.ai-demos.cocorobo.hk/labs/speech-cloud/index.html" : "https://beta.ai-demos.cocorobo.cn/labs/speech-cloud/index.html"
        }
    ]

    useEffect(() => {
        const dispositionData = dispositionList[0]
        setDisposition(dispositionData)
    }, [])
    const handleCardClick = (value: string) => {
        console.log("Received value from child:", value);
        setCardVisible(true);
        setCardTitle(value);
        const dispositionData = dispositionList.find(item => item.title === value) || ({} as dispositionType);
        setDisposition(dispositionData);
        // console.log("dispositionData", dispositionData)
    };

    const openIframe = () => {
        setDispositionActive(true);
        const data = {
            data: userInfo,
            id: "loginVerify",
            url: localStorage.getItem('lang')=="zhHans"?"zh-hans":localStorage.getItem('lang')=="zhHant"?"zh-hant":"en"
        }
        console.log("data", data)
        if (iframeRef.current) {
            iframeRef.current.onload = () => {
                iframeRef.current?.contentWindow?.postMessage(JSON.stringify(data), "*")
            }
        }
    }

    return (
        <div className="labs">
            <div className="header-right-text" onClick={() => setLabsVisible(true)}>
                <img src={labsImg} alt="labs" style={{ width: 36 }} className="header-right-icon" />
                <span>实验室</span>
            </div>
            <Modal title="实验室"  visible={labsVisible} footer={null} width={800} className="labs-modal"
                onCancel={() => setLabsVisible(false)}>
                <Row style={{ borderTop: '1px solid #ddd' }}>
                    <Col span={8}>
                        <h2>所有分类：</h2>
                        <div className="labs-list">
                            <div className={active === 0 ? 'labs-list-active' : ''} onClick={() => setActive(0)}>人工智能</div>
                            <div className={active === 1 ? 'labs-list-active' : ''} onClick={() => setActive(1)}>物联网</div>
                            <div className={active === 2 ? 'labs-list-active' : ''} onClick={() => setActive(2)}>机器人控制</div>
                            <div className={active === 3 ? 'labs-list-active' : ''} onClick={() => setActive(3)}>科学实验</div>
                            <div className={active === 4 ? 'labs-list-active' : ''} onClick={() => setActive(4)}>互动游戏</div>
                            <div className={active === 5 ? 'labs-list-active' : ''} onClick={() => setActive(5)}>AR/VR</div>
                        </div>
                    </Col>
                    <Col span={16}>
                        {active === 0 && <AI handleChildValue={handleCardClick} />}
                        {active === 1 && <IOT handleChildValue={handleCardClick} />}
                        {active === 2 && <Robot />}
                        {active === 3 && <Science />}
                        {active === 4 && <Game handleChildValue={handleCardClick} />}
                        {active === 5 && <AR />}
                    </Col>
                </Row>
            </Modal>

            <Modal title="实验室" visible={cardVisible} footer={null} width={"55%"} className="labs-modal" onCancel={() => setCardVisible(false)}>
               <Row gutter={16} style={{ borderTop: '1px solid #ddd' }} className="disposition-row">
                    <Col span={11} className="disposition-col" style={{backgroundColor: "#fff"}}> 
                        <img src={disposition.img} alt="" />
                        <h3>{disposition.title}</h3>
                        <p>{disposition.content}</p>
                    </Col>
                    <Col span={1} />
                    <Col span={12} className="disposition-col">
                        <div className="disposition-content">
                            <h4>最低配置要求</h4>
                            <p>最小操作系统版本：{disposition.system}</p>
                            <p>建议分辨率：{disposition.resolution}</p>
                            <p>内存容量：{disposition.memoryCapacity}</p>
                            <p>硬盘：{disposition.HardDisk}</p>
                            <p>显卡：{disposition.GraphicsCard}</p>
                            <p>是否需要摄像头：{disposition.camera ? "需要" : "不需要"}</p>
                            <p>是否需要麦克风：{disposition.microphone ? "需要" : "不需要"}</p>
                        </div>
                        <Button className="disposition-btn" type="primary" onClick={() => openIframe()}>进入</Button>
                    </Col>
                </Row>
            </Modal>

            <Modal width={"95%"} visible={dispositionActive} className="labs-iframe-modal" footer={null} onCancel={() => setDispositionActive(false)}>
                <iframe ref={iframeRef} style={{width:"100%",height:"700px",overflow:"hidden"}} src={disposition.iframeSrc} frameBorder="0"></iframe>
            </Modal>
        </div>
    )
}


export default labs;