import { Modal, Row, Col, Button } from "antd";
import React, { useState, useEffect } from "react";
import Data from "../../locales/updateData.json"
import '../../asstes/css/footer.css'
import updateLogImg from '../../asstes/icon/updateLog.png'
import helpImg from '../../asstes/icon/help.png'

const UpdateLog: React.FC = () => {
    const [helpUrl, setHelpUrl] = useState("https:pi-help.cocorobo.cn");
    const [visible, setVisible] = useState(false);
    const [lang, setLang] = useState<"zh-hans" | "zh-hant" | "English">("zh-hans")
    const [switchButton, setSwitchButton] = useState(false);
    const newData = Data.newData;
    const oldData = Data.oldData;

    useEffect(() => {
        let location = window.location.href;
        if (location.indexOf("cocorobo.hk") > -1) {
            setHelpUrl("https://pi-help.cocorobo.hk");
        } else if (location.indexOf("cocorobo.com") > -1) {
            setHelpUrl("https://pi-help.cocorobo.com");
        } else {
            setHelpUrl("https://pi-help.cocorobo.cn");
        }
        let localStorage = window.localStorage.getItem("language") || "zh-hans";
        if (["zh-hans", "zh-hant", "English"].includes(localStorage)) {
            setLang(localStorage as "zh-hans" | "zh-hant" | "English");
        }
    }, [lang]);
    return (
        <div className="update-log">
            <div className="header-right-text" style={{ borderRight: "1px solid #ccc" }}
                onClick={() => setVisible(true)}>
                <span>更新日志</span>
                <img style={{ width: 20, marginLeft: 10 }} src={updateLogImg} alt="updateLog" className="header-right-icon" />
            </div>
            <a href={helpUrl} target="_blank" rel="noreferrer" className="help-link">
                <span>帮助</span>
                <img style={{ width: 20, marginLeft: 10 }} src={helpImg} alt="updateLog" className="header-right-icon" />
            </a>
            <Modal title={`更新日志${newData.time}`} style={{ minHeight: 700 }} visible={visible} footer={null} width={"55%"} onCancel={() => setVisible(false)}>
                {!switchButton ? <Row gutter={16} className="update-log-box">
                    <Col span={12} style={{ padding: '0 10px 0 0', overflowY: 'auto', height: "100%" }}>
                        <div className="update-log-content-left" >
                            <h5>更新内容</h5>
                            <ul>
                                <li>
                                    <p>积木</p>
                                    <ul>
                                        {newData[lang].blocks.map((block, index) => (
                                            <li key={index}>{block}</li>
                                        ))}
                                    </ul>
                                </li>
                                <li>
                                    <p>样例</p>
                                    <ul>
                                        {newData[lang].exampless.map((example: any, index: number) => (
                                            <li key={index}>{example}</li>
                                        ))}
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </Col>
                    <Col span={12} style={{ padding: '0 0 0 10px', overflowY: 'auto', height: "100%" }}>
                        <div className="update-log-content-left" >
                            <h5>注意事项</h5>
                            <ul>
                                {newData[lang].notice.map((n: any, index: number) => (
                                    <li key={index}>{n}</li>
                                ))}
                            </ul>
                        </div>
                    </Col>
                </Row> :
                    <Row gutter={16} className="update-log-box">
                        <Col span={12} style={{ padding: '0 10px 0 0', overflowY: 'auto', height: "100%" }}>
                            <div className="update-log-content-left" >
                                <h5>更新内容</h5>
                                {oldData.map((n: any, i: number) => (
                                    <div key={i}>
                                        <p style={{ fontSize: 20, paddingLeft: 15 }} key={i}>{n.time}</p>
                                        <ul>
                                            <li>
                                                <p>积木</p>
                                                <ul>
                                                    {n[lang].blocks.map((block: any, index: number) => (
                                                        <li key={index}>{block}</li>
                                                    ))}
                                                </ul>
                                            </li>
                                            <li>
                                                <p>样例</p>
                                                <ul>
                                                    {n[lang].exampless.map((example: any, index: number) => (
                                                        <li key={index}>{example}</li>
                                                    ))}
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                ))}
                            </div>
                        </Col>
                        <Col span={12} style={{ padding: '0 0 0 10px', overflowY: 'auto', height: "100%" }}>
                            <div className="update-log-content-left" >
                                <h5>注意事项</h5>
                                {oldData.map((n: any, i: number) => (
                                    <div>
                                        <p style={{ fontSize: 20, paddingLeft: 15 }} key={i}>{n.time}</p>
                                        <ul>
                                            {n[lang].notice.map((block: any, index: number) => (
                                                <li key={index}>{block}</li>
                                            ))}
                                        </ul>
                                    </div>
                                ))}
                            </div>
                        </Col>
                    </Row>}

                <div style={{ textAlign: "right" }}>
                    <Button type="primary" style={{ marginTop: 15 }}
                        onClick={() => setSwitchButton(!switchButton)}>{switchButton ? "最新更新" : "历史更新"}</Button>
                </div>
            </Modal>
        </div>
    )
}
export default UpdateLog;