/** @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, { ReactNode, useRef, useState } from "react";

type UcloudOssConfigItem = {
	id: number;
	userId: number;
	bucketName: string;
	publicKey: string;
	privateKey: string;
	customHost: string;
	createdTime: string;
	updatedTime: string;
	status: string;
};
const data: UcloudOssConfigItem[] = [
	{
		id: 1,
		userId: 1,
		bucketName: "https://oss.aliyuncs.com",
		publicKey: "LTAI5tG3",
		privateKey: "G3",
		customHost: "G3",
		createdTime: "2022-01-01",
		updatedTime: "2022-01-01",
		status: "正常",
	},
];

const columns: ProColumns<UcloudOssConfigItem>[] = [
	{
		dataIndex: "index",
		valueType: "indexBorder",
		width: 48,
	},
	{
		title: "ID",
		dataIndex: "id",
		copyable: true,
		ellipsis: true,
		tooltip: "Id",
	},
	{
		disable: true,
		title: "存储桶",
		dataIndex: "bucketName",
		tooltip: "bucketName",
		ellipsis: true,
	},
	{
		disable: true,
		title: "公钥",
		dataIndex: "publicKey",
		tooltip: "publicKey",
		ellipsis: true,
	},
	{
		disable: true,
		title: "私钥",
		dataIndex: "privateKey",
		tooltip: "privateKey",
		ellipsis: true,
	},
	{
		disable: true,
		title: "服务地址",
		dataIndex: "customHost",
		tooltip: "customHost",
		ellipsis: true,
	},
	{
		disable: true,
		title: "状态",
		dataIndex: "status",
		search: true,
	},
	{
		title: "创建时间",
		dataIndex: "createdTime",
		valueType: "dateTime",
		sorter: true,
		hideInSearch: 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: ReactNode, record: UcloudOssConfigItem, _: number, action: any) => [
			<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 UcloudSettings: React.FC = () => {
	const actionRef = useRef<ActionType>();
	const [open, setOpen] = useState(false);
	const showDrawer = () => {
		setOpen(true);
	};

	const onClose = () => {
		setOpen(false);
	};
	const AddUcloudOssConfigDrawer = () => {
		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="customHost"
									label="服务地址"
									rules={[{ required: true, message: "请输入服务地址！" }]}>
									<Input placeholder="请输入服务地址！" />
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
									name="bucketName"
									label="存储桶"
									rules={[{ required: true, message: "请输入存储桶！" }]}>
									<Input placeholder="请输入存储桶！" />
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={16}>
							<Col span={12}>
								<Form.Item
									name="publicKey"
									label="公钥"
									rules={[{ required: true, message: "请输入公钥!" }]}>
									<Input placeholder="请输入公钥！" />
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
									name="privateKey"
									label="私钥"
									rules={[{ required: true, message: "请输入私钥!" }]}>
									<Input placeholder="请输入私钥！" />
								</Form.Item>
							</Col>
						</Row>
					</Form>
				</Drawer>
			</>
		);
	};
	return (
		<>
			<div style={{ height: "65vh" }}>
				<ProTable<UcloudOssConfigItem>
					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,
						} as any
					}
					dateFormatter="string"
					headerTitle="UCloud US3配置"
					bordered={false}
					toolBarRender={() => [
						<Button
							key="button"
							icon={<PlusOutlined />}
							onClick={() => {
								showDrawer();
							}}
							type="primary">
							新建
						</Button>,
					]}
				/>
				<AddUcloudOssConfigDrawer />
			</div>
		</>
	);
};

export default UcloudSettings;
