import React, { useState, useCallback, useEffect, useMemo } from "react";
import { useStores } from "@/store/index";
import { InputBase, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import NoProject from "@/components/BusinessComponents/NoProject";
import { observer } from "mobx-react-lite";
import projectImg from "@/assets/project/projectIconSmall.svg";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import TaskCard from './TaskCard'

import style from "./index.module.css";

const ProjectOverview = observer(() => {
    const { currentProjectStore } = useStores();
    // 选择近7天or近15天or近30天
    const [activeTab, setActiveTab] = useState("seven");
    if (currentProjectStore.currentProjectInfo.name) {
        return (
            <>
                <div className={style.basicInformation}>
                    <div>
                        <div className={style.titleBox}>
                            <img src={projectImg} alt="项目logo" style={{ width: 30, height: 30 }} />
                            <span className={style.projectName}>
                                {currentProjectStore.currentProjectInfo.name}
                            </span>
                        </div>
                        <div className={style.otherInformation}>
                            <div className={style.otherInformationBox}><span>角色：</span><span className={style.informationcolor}>管理员</span></div>
                            <div className={style.otherInformationBox}><span>计算区：</span><span className={style.informationcolor}>通用计算区</span></div>
                            <div className={style.otherInformationBox}><span>创建日期：</span><span className={style.informationcolor}>2022-07-07</span></div>
                        </div>
                    </div>
                    <div className={style.basicInformationRight}>
                        <div>
                            <div className={style.otherInformationBox}>项目总消费</div>
                            <div><span className={style.numberDisplay}>1,324</span>元</div>
                        </div>
                        <div className={style.verticalLine}></div>
                        <div>
                            <div className={style.otherInformationBox}>项目预算</div>
                            <div><span className={style.numberDisplay}>1,324</span>元</div>
                        </div>
                        <div className={style.verticalLine}></div>
                        <div>
                            <div className={style.otherInformationBox}>项目存储大小</div>
                            <div><span className={style.numberDisplay}>123</span> G</div>
                        </div>
                    </div>
                </div>
                <div className={style.searchBox}>
                    <div className={style.searchLineLeft}>
                        <div className={style.taskOverview}>任务概览</div>
                        <RadioGroupOfButtonStyle
                            value={activeTab}
                            radioOptions={[
                                { value: "seven", label: "近7天" },
                                { value: "fifteen", label: "近15天" },
                                { value: "thirty", label: "近30天" },
                            ]}
                            handleRadio={setActiveTab}
                        ></RadioGroupOfButtonStyle>
                    </div>
                    <div className={style.projectDataSearch}>
                        <InputBase
                            className={style.searchInput}
                            placeholder="输入关键词搜索"
                            inputProps={{ "aria-label": "输入关键词搜索" }}
                            // value={keyWord}
                            // onChange={handleKeyWordChange}
                            style={{ width: "280px", fontSize: "14px" }}
                        // onKeyUp={handleKeyWordChangeKeyUp}
                        />
                        <IconButton
                            type="submit"
                            className={style.searchButton}
                            aria-label="search"
                            size="small"
                            style={{ padding: "4px" }}
                        // onClick={handleRefresh}
                        >
                            <SearchIcon
                                className={style.searchIcon}
                                style={{ color: "#999" }}
                            />
                        </IconButton>
                    </div>
                </div>
                <div className={style.taskDisplay}>
                    <TaskCard />
                    <TaskCard />
                </div>
            </>
        );
    } else {
        return <NoProject />;
    }
})
export default ProjectOverview