/*
 * @Author: 吴永生 15770852798@163.com
 * @Date: 2022-08-02 11:43:28
 * @LastEditors: 吴永生 15770852798@163.com
 * @LastEditTime: 2022-08-30 19:32:05
 * @FilePath: /bkunyun/src/views/Project/components/ProjectListPopper/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
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 { useClickAway } from 'ahooks';
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";

const ProjectListPopper = observer((props: any) => {
	const { handleChangeCurrentProject, handleClickOpen, setProjectListOpen } =
		props;
	const { currentProjectStore } = useStores();
	const projectList = toJS(currentProjectStore.projectList);
	const currentProjectId = toJS(currentProjectStore.currentProjectInfo.id);
	// 通过名称本地搜索
	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) => {
		setProjectListOpen(false);
	};

	useClickAway(
    () => {
      setProjectListOpen(false);
    },
    () => document.getElementById('use-click-projectList-mainBox'),
  );

	return (
		<div className={style.projectBox} onClick={handleProjectBox}>
			<div className={style.mainBox} id="use-click-projectList-mainBox" onClick={(e: any)=>e.stopPropagation()}>
				<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.id === currentProjectId,
								})}
								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>
		</div>
	);
});

export default ProjectListPopper;
