import React, { useState } from "react";
import { Modal, Flex, Input, Typography, Checkbox, Button, Collapse } from "antd";
import "../asstes/css/Sidebar.css"

import Img1 from '../asstes/img/goUpper.png'
// import Img2 from '../asstes/img/任务卡片.png'
import Img3 from '../asstes/img/对话.png'
import Img4 from '../asstes/img/wenti.png'
import TermsService from "./TermsService";
import Privacy from "./Privacy";



function Sidebar() {
    const [isModalOpen1, setIsModalOpen1] = useState(false);
    const [isModalOpen2, setIsModalOpen2] = useState(false);
    const [isModalOpen3, setIsModalOpen3] = useState(false);
    const [isModalOpen4, setIsModalOpen4] = useState(false);


    const handleOk1 = () => {
        setIsModalOpen1(false);
    }
    const handleOk2 = () => {
        setIsModalOpen2(false);
    }
    const handleOk3 = () => {
        setIsModalOpen2(false);
    }
    const handleOk4 = () => {
        setIsModalOpen2(false);
    }
    const items = [
        {
            key: '1',
            label: 'CocoPi 通过什么方式连接',
            children: <p>CocoPi 基于Chrome ADB 服务连接，使板子和硬件进行简单通讯。</p>,
        }
    ];
    const onChangeCollapse = (key) => {
        console.log(key);
    }
    return (
        <div className="Sidebar">
            <div>
                <a href="#Introduction">
                    <img src={Img1} alt="回到顶部" />
                    <br />
                    <span>回到顶部</span>
                </a>
            </div>
            {/* <div onClick={() => setIsModalOpen1(true)}>
                <img src={Img2} alt="申請試用" />
                <br />
                <span>申請試用</span>
            </div> */}
            <div>
                <a href="#Contact">
                    <img src={Img3} alt="联络我们" />
                    <br />
                    <span>联络我们</span>
                </a>
            </div>
            <div onClick={() => setIsModalOpen2(true)}>
                <img src={Img4} alt="常见问题" />
                <br />
                <span>常见问题</span>
            </div>
            <Modal open={isModalOpen1} onOk={handleOk1} onCancel={() => setIsModalOpen1(false)}
                footer={[]}>
                <h3 className="Model_h3_title">CocoClass賬號申請</h3>
                <Flex vertical gap={16}>
                    <div>
                        <Typography.Title level={5}>學校名稱</Typography.Title>
                        <Input placeholder="請輸入" />
                    </div>
                    <div>
                        <Typography.Title level={5}>賬戶（請輸入電郵）</Typography.Title>
                        <Input placeholder="請輸入" />
                    </div>
                    <div>
                        <Typography.Title level={5}>姓名</Typography.Title>
                        <Input placeholder="請輸入" />
                    </div>
                </Flex>
                <p className="model_p_text">*請填寫以上申請信息，我們將在工作日24小時内回復您。您的信息將被嚴格保密，不會被用於其他用途。</p>
                <Checkbox></Checkbox> <span>繼續即表示您同意我們的
                    <i className="model_checkbox_i" onClick={() => setIsModalOpen3(true)}>服務條款</i>和
                    <i className="model_checkbox_i" onClick={() => setIsModalOpen4(true)}>隱私政策</i>，並確認您已年滿18歲。</span>
                <div style={{ textAlign: 'center', marginTop: 20 }}>
                    <Button type="primary" onClick={() => setIsModalOpen1(false)}>提交</Button>
                </div>
            </Modal>

            <Modal open={isModalOpen2} onOk={handleOk2} onCancel={() => setIsModalOpen2(false)}
                footer={[]} width={800} >
                <h3 className="Model_h3_title">常见问题</h3>
                <div style={{ minHeight: 400 }}>
                    <Collapse items={items} defaultActiveKey={['1']} onChange={onChangeCollapse} />
                </div>
            </Modal>
            <Modal open={isModalOpen3} onOk={handleOk3} onCancel={() => setIsModalOpen3(false)}
                footer={[]} width={800}>
                <h3 className="Model_h3_title">服務條款</h3>
                <TermsService />
            </Modal>
            <Modal open={isModalOpen4} onOk={handleOk4} onCancel={() => setIsModalOpen4(false)}
                footer={[]} width={800}>
                <h3 className="Model_h3_title">隱私政策</h3>
                <Privacy />
            </Modal>
        </div >
    )
}

export default Sidebar