import { InputBase, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import styles from "./index.module.css";
import { useState } from "react";

const OperatorList = () => {
	const [name, setName] = useState("");
	const nameChange = (e: any) => {
		setName(e.target.value);
	};
	const list = [
		{
			name: "这是中文",
			version: "1.0.0",
		},
		{
			name: "asdf",
			version: "1.0.0",
		},
		{
			name: "asdf",
			version: "1.0.0",
		},
		{
			name: "asdf",
			version: "1.0.0",
		},
		{
			name: "asdf",
			version: "1.0.0",
		},
		{
			name: "asdf",
			version: "1.0.0",
		},
		{
			name: "asdf",
			version: "1.0.0",
		},
		{
			name: "asdf",
			version: "1.0.0",
		},
		{
			name: "asdf",
			version: "1.0.0",
		},
		{
			name: "asdf",
			version: "1.0.0",
		},
	];

	const randerIcon = () => {
		return (
			<div className={styles.icon}>
				<div className={styles.iconLi}>
					<div className={styles.iconItem}></div>
					<div className={styles.iconItem}></div>
				</div>
				<div className={styles.iconLi}>
					<div className={styles.iconItem}></div>
					<div className={styles.iconItem}></div>
				</div>
				<div className={styles.iconLi}>
					<div className={styles.iconItem}></div>
					<div className={styles.iconItem}></div>
				</div>
			</div>
		);
	};

	return (
		<div className={styles.operatorList}>
			<div className={styles.searchBox}>
				<IconButton
					type="submit"
					className={styles.searchButton}
					aria-label="search"
				>
					<SearchIcon
						className={styles.searchIcon}
						style={{ color: "rgba(153, 153, 153, 1)" }}
					/>
				</IconButton>
				<InputBase
					className={styles.searchInput}
					placeholder="请输入算子名称"
					value={name}
					onChange={nameChange}
				/>
			</div>
			<div className={styles.list}>
				{list.map((item, index) => {
					return (
						<div key={index} className={styles.li}>
							{randerIcon()}
							<span className={styles.name}>{item.name}</span>
							<span className={styles.version}>{item.version}</span>
						</div>
					);
				})}
			</div>
		</div>
	);
};

export default OperatorList;
