import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import { useState } from "react";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import MyMultipleMenu, { IOption } from "@/components/mui/MyMultipleMenu";
import MySelect from "../../ProjectSubmitWork/components/MySelect";
import MyInput from "@/components/mui/MyInput";
import ButtonComponent from "@/components/mui/MyButton";
import SearchIcon from "@mui/icons-material/Search";
import MyPagination from "@/components/mui/MyPagination";
import style from "./index.module.css";

type ISeeDatasetProps = {
	handleClose: any;
};

const dataTypesMock = [
	{
		label: "123",
		value: "1234",
	},
	{
		label: "1232",
		value: "12342",
	},
	{
		label: "1233",
		value: "12344",
	},
];

const SeeDataset = (props: ISeeDatasetProps) => {
	const [graphicDimension, setGraphicDimension] = useState("2D"); // 分子结构图是2D还是3D
	const [showDataTypes, setShowDataTypes] = useState<Array<string>>([]); //显示的数据类型
	const [dataTypes, setdataTypes] = useState<Array<IOption>>(dataTypesMock); // 可选的数据类型
	const [sort, setSort] = useState("null"); // 排序方式
	const [keyword, setKeyword] = useState(""); // 关键字
	const [searchDataType, setSearchDataType] = useState<string>(""); //显示的数据类型
	const [page, setPage] = useState(1); // 当前页码
	const [count, setCount] = useState(1); // 总页数
	const handleSearchDataTypeChange = (e: any) => {
		setSearchDataType(e.target.value);
	};
	const handleSortChange = (e: any) => {
		console.log(e);
		setSort(e.target.value);
	};
	const handleKeywordChange = (e: any) => {
		console.log(e);
		setKeyword(e.target.value);
	};
	const list = [1, 2, 3, 2, 1, 45, 6, 7];
	const pageChange = (value: number) => {
		setPage(value);
	};
	return (
		<FullScreenDrawer handleClose={props.handleClose}>
			<div className={style.datasetBox}>
				<div className={style.top}>
					<div className={style.title}>数据集title</div>
					<div className={style.screens}>
						<div className={style.screensLeft}>
							<RadioGroupOfButtonStyle
								handleRadio={setGraphicDimension}
								value={graphicDimension}
								radioOptions={[
									{
										value: "2D",
										label: "2D",
									},
									{
										value: "3D",
										label: "3D",
									},
								]}
								RadiosBoxStyle={{ width: "132px" }}
							></RadioGroupOfButtonStyle>
							<MyMultipleMenu
								value={showDataTypes}
								options={dataTypes}
								setValue={setShowDataTypes}
								showSelectAll={true}
							>
								<span className={style.selectShowData}>
									选择显示数据({showDataTypes.length})
								</span>
							</MyMultipleMenu>
						</div>
						<div className={style.screensRight}>
							<MySelect
								options={dataTypes}
								placeholder="选择属性"
								value={searchDataType}
								onChange={handleSearchDataTypeChange}
								fullWidth={false}
								sx={{
									width: "160px",
									marginRight: "16px",
								}}
							></MySelect>
							<MySelect
								options={[
									{
										label: "无",
										value: "null",
									},
									{
										label: "正序",
										value: "1",
									},
									{
										label: "倒序",
										value: "2",
									},
								]}
								title="排序方式"
								value={sort}
								onChange={handleSortChange}
								isTitle={true}
								fullWidth={false}
								sx={{
									width: "160px",
									marginRight: "16px",
								}}
							></MySelect>
							<MyInput
								value={keyword}
								onChange={handleKeywordChange}
								placeholder="请输入关键词搜索"
								fullWidth={false}
								InputProps={{
									endAdornment: <SearchIcon style={{ color: "#8A9099" }} />,
								}}
								sx={{
									width: "340px",
									marginRight: "16px",
								}}
							></MyInput>
							<ButtonComponent
								text="确认"
								style={{ width: "68px" }}
							></ButtonComponent>
						</div>
					</div>
				</div>
				<div className={style.table}>
					<div className={style.list}>
						{list.map((item) => {
							return (
								<div className={style.datasetLi}>
									{/* <div className={datasetLiTop}></div>
								<div className={datasetLiTop}></div> */}
								</div>
							);
						})}
					</div>
					<div className={style.pagination}>
						<MyPagination page={page} pageChange={pageChange} count={count} />
					</div>
				</div>
			</div>
			{/* <div className={style.foot}>
				<ButtonComponent
					variant="outlined"
					text="下载"
					style={{ marginRight: "12px" }}
				></ButtonComponent>
				<ButtonComponent text="另存为"></ButtonComponent>
			</div> */}
		</FullScreenDrawer>
	);
};

export default SeeDataset;
