import smallLogo from "@/assets/project/projectIconSmall.svg";
import style from "./index.module.css";
import { InputBase, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import AddIcon from "@mui/icons-material/Add";
import classNames from "classnames";
import { useStores } from "@/store/index";
import moment from "moment";
import React, { useMemo, useState } from "react";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";

const ProjectListPopper = observer((props: any) => {
	const { handleChangeCurrentProject, handleClickOpen } = props;
	const { currentProjectStore } = useStores();
	const projectList = toJS(currentProjectStore.projectList);
	const currentProjectName = toJS(currentProjectStore.currentProjectInfo.name);
	// 通过名称本地搜索
	const [name, setName] = useState("");
	const nameChange = (e: any) => {
		setName(e.target.value);
	};

	const list = useMemo(() => {
		return projectList.filter((item: any) => {
			return item.name?.indexOf(name) !== -1;
		});
	}, [projectList, name]);

	const handleProjectBox = (e: React.SyntheticEvent) => {
		e.nativeEvent.stopImmediatePropagation();
	};

	return (
		<div className={style.projectBox} onClick={handleProjectBox}>
			<div className={style.searchBox}>
				<IconButton
					type="submit"
					className={style.searchButton}
					aria-label="search"
				>
					<SearchIcon
						className={style.searchIcon}
						style={{ color: "rgba(153, 153, 153, 1)" }}
					/>
				</IconButton>
				<InputBase
					className={style.searchInput}
					placeholder="请输入项目名称"
					inputProps={{ "aria-label": "请输入项目名称" }}
					value={name}
					onChange={nameChange}
				/>
				<IconButton
					onClick={handleClickOpen}
					type="submit"
					className={style.add}
					aria-label="search"
				>
					<AddIcon className={style.addIcon} />
				</IconButton>
			</div>
			<div className={style.projectlist}>
				{list.map((item: any) => {
					return (
						<div
							className={classNames({
								[style.projectli]: true,
								[style.projectliActive]: item.name === currentProjectName,
							})}
							key={item.id}
							onClick={() => handleChangeCurrentProject(item)}
						>
							<div className={style.projectliBorderBox}>
								<img src={smallLogo} alt="" className={style.projectliLogo} />
								<div className={style.projectliInfo}>
									<div className={style.projectName}>{item.name}</div>
									<div className={style.projectOwnerTime}>
										<span className={style.projectOwner} title={item.owner}>
											{item.owner}
										</span>
										<span className={style.projectTime}>
											{moment(item.createdAt).format("YYYY-MM-DD")}
										</span>
									</div>
								</div>
							</div>
						</div>
					);
				})}
			</div>
		</div>
	);
});

export default ProjectListPopper;
