/** @format */
import { PlusOutlined } from "@ant-design/icons";
import type { ActionType, ProColumns } from "@ant-design/pro-components";
import { ProTable, TableDropdown } from "@ant-design/pro-components";
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
import React, { useRef, useState } from "react";

type AliOssConfigItem = {
	id: number;
	userId: number;
	endpoint: string;
	accessKeyId: string;
	accessKeySecret: string;
	createdTime: string;
	updatedTime: string;
	status: string;
};
const data: AliOssConfigItem[] = [
	{
		id: 1,
		userId: 1,
		endpoint: "https://oss.aliyuncs.com",
		accessKeyId: "LTAI5tG3",
		accessKeySecret: "G3",
		createdTime: "2024-06-28 10:51:59",
		updatedTime: "2024-06-29 10:51:59",
		status: "正常",
	},
];

const columns: ProColumns<AliOssConfigItem>[] = [
	{
		dataIndex: "index",
		valueType: "indexBorder",
		width: 48,
	},
	{
		title: "ID",
		dataIndex: "id",
		copyable: true,
		ellipsis: true,
		tooltip: "Id",
	},
	{
		disable: true,
		title: "服务地址",
		dataIndex: "endpoint",
		tooltip: "endpoint",
		ellipsis: true,
	},
	{
		disable: true,
		title: "密钥ID",
		dataIndex: "accessKeyId",
		tooltip: "access key id",
		ellipsis: true,
	},
	{
		disable: true,
		title: "密钥值",
		dataIndex: "accessKeySecret",
		tooltip: "access key secret",
		ellipsis: true,
	},
	{
		disable: true,
		title: "状态",
		dataIndex: "status",
		search: true,
	},
	{
		title: "创建时间",
		dataIndex: "createdTime",
		valueType: "dateTime",
		sorter: true,
	},
	{
		title: "更新时间",
		dataIndex: "updatedTime",
		valueType: "dateTime",
		sorter: true,
	},
	{
		title: "操作",
		valueType: "option",
		key: "option",
		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
		// @ts-expect-error
		render: (text, record, _, action) => [
			<a
				key="editable"
				onClick={() => {
					action?.startEditable?.(record.id);
				}}>
				编辑
			</a>,
			<a target="_blank" rel="noopener noreferrer" key="view">
				查看
			</a>,
			<TableDropdown
				key="actionGroup"
				onSelect={() => action?.reload()}
				menus={[
					{ key: "copy", name: "复制" },
					{ key: "delete", name: "删除" },
				]}
			/>,
		],
	},
];

const AliSettings: React.FC = () => {
	const actionRef = useRef<ActionType>();
	const [open, setOpen] = useState(false);
	const showDrawer = () => {
		setOpen(true);
	};

	const onClose = () => {
		setOpen(false);
	};
	const AddAliOssConfigDrawer = () => {
		return (
			<>
				<Drawer
					title="创建连接配置"
					width={720}
					onClose={onClose}
					open={open}
					styles={{
						body: {
							paddingBottom: 80,
						},
					}}
					extra={
						<Space>
							<Button onClick={onClose}>取消</Button>
							<Button onClick={onClose} type="primary">
								提交
							</Button>
						</Space>
					}>
					<Form layout="vertical">
						<Row gutter={16}>
							<Col span={12}>
								<Form.Item
									name="endpoint"
									label="服务地址"
									rules={[{ required: true, message: "请输入服务地址！" }]}>
									<Input placeholder="请输入服务地址！" />
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={16}>
							<Col span={12}>
								<Form.Item
									name="accessKeyId"
									label="密钥ID"
									rules={[{ required: true, message: "请输入密钥ID!" }]}>
									<Input placeholder="请输入密钥ID！" />
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
									name="accessKeySecret"
									label="密钥值"
									rules={[{ required: true, message: "请输入密钥值!" }]}>
									<Input placeholder="请输入密钥值！" />
								</Form.Item>
							</Col>
						</Row>
					</Form>
				</Drawer>
			</>
		);
	};
	return (
		<>
			<ProTable<AliOssConfigItem>
				columns={columns}
				dataSource={data}
				actionRef={actionRef}
				cardBordered={true}
				editable={{
					type: "multiple",
				}}
				columnsState={{
					persistenceKey: "pro-table-singe-demos",
					persistenceType: "localStorage",
					defaultValue: {
						option: { fixed: "right", disable: true },
					},
				}}
				rowKey="id"
				search={false}
				options={{
					setting: {
						listsHeight: 400,
					},
				}}
				pagination={{
					pageSize: 5,
				}}
				dateFormatter="string"
				headerTitle="阿里云OSS配置"
				bordered={false}
				toolBarRender={() => [
					<Button
						key="button"
						icon={<PlusOutlined />}
						onClick={() => {
							showDrawer();
						}}
						type="primary">
						新建
					</Button>,
				]}
			/>
			<AddAliOssConfigDrawer />
		</>
	);
};

export default AliSettings;
