/** @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, DatePicker, Drawer, Form, Input, Row, Select, Space } from "antd";
import React, { ReactNode, useRef, useState } from "react";

type BaiduOssConfigItem = {
	id: number;
	userId: number;
	endpoint: string;
	accessKeyId: string;
	accessKeySecret: string;
	created_time: string;
	updated_time: string;
	status: string;
};
const data: BaiduOssConfigItem[] = [
	{
		id: 1,
		userId: 1,
		endpoint: "https://oss.aliyuncs.com",
		accessKeyId: "LTAI5tG3",
		accessKeySecret: "G3",
		created_time: "2022-01-01",
		updated_time: "2022-01-01",
		status: "正常",
	},
];

const columns: ProColumns<BaiduOssConfigItem>[] = [
	{
		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: "date",
		sorter: true,
		hideInSearch: true,
	},
	{
		title: "更新时间",
		dataIndex: "updateTime",
		valueType: "date",
		sorter: true,
	},
	{
		title: "操作",
		valueType: "option",
		key: "option",
		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
		// @ts-expect-error
		render: (text: ReactNode, record: BaiduOssConfigItem, _, 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 BaiduSettings: React.FC = () => {
	const actionRef = useRef<ActionType>();
	const [open, setOpen] = useState(false);
	const showDrawer = () => {
		setOpen(true);
	};

	const onClose = () => {
		setOpen(false);
	};
	const AddBaiduOssConfigDrawer = () => {
		return (
			<>
				<Drawer
					title="Create a new account"
					width={720}
					onClose={onClose}
					open={open}
					styles={{
						body: {
							paddingBottom: 80,
						},
					}}
					extra={
						<Space>
							<Button onClick={onClose}>Cancel</Button>
							<Button onClick={onClose} type="primary">
								Submit
							</Button>
						</Space>
					}>
					<Form layout="vertical" hideRequiredMark>
						<Row gutter={16}>
							<Col span={12}>
								<Form.Item
									name="name"
									label="Name"
									rules={[{ required: true, message: "Please enter user name" }]}>
									<Input placeholder="Please enter user name" />
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
									name="url"
									label="Url"
									rules={[{ required: true, message: "Please enter url" }]}>
									<Input
										style={{ width: "100%" }}
										addonBefore="http://"
										addonAfter=".com"
										placeholder="Please enter url"
									/>
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={16}>
							<Col span={12}>
								<Form.Item
									name="owner"
									label="Owner"
									rules={[{ required: true, message: "Please select an owner" }]}>
									<Select placeholder="Please select an owner">
										<Select.Option value="xiao">Xiaoxiao Fu</Select.Option>
										<Select.Option value="mao">Maomao Zhou</Select.Option>
									</Select>
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
									name="type"
									label="Type"
									rules={[{ required: true, message: "Please choose the type" }]}>
									<Select placeholder="Please choose the type">
										<Select.Option value="private">Private</Select.Option>
										<Select.Option value="public">Public</Select.Option>
									</Select>
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={16}>
							<Col span={12}>
								<Form.Item
									name="approver"
									label="Approver"
									rules={[
										{ required: true, message: "Please choose the approver" },
									]}>
									<Select placeholder="Please choose the approver">
										<Select.Option value="jack">Jack Ma</Select.Option>
										<Select.Option value="tom">Tom Liu</Select.Option>
									</Select>
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
									name="dateTime"
									label="DateTime"
									rules={[
										{ required: true, message: "Please choose the dateTime" },
									]}>
									<DatePicker.RangePicker
										style={{ width: "100%" }}
										getPopupContainer={(trigger) => trigger.parentElement!}
									/>
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={16}>
							<Col span={24}>
								<Form.Item
									name="description"
									label="Description"
									rules={[
										{
											required: true,
											message: "please enter url description",
										},
									]}>
									<Input.TextArea
										rows={4}
										placeholder="please enter url description"
									/>
								</Form.Item>
							</Col>
						</Row>
					</Form>
				</Drawer>
			</>
		);
	};
	return (
		<>
			<div style={{ height: "65vh" }}>
				<ProTable<BaiduOssConfigItem>
					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="百度云BOS配置"
					bordered={false}
					toolBarRender={() => [
						<Button
							key="button"
							icon={<PlusOutlined />}
							onClick={() => {
								showDrawer();
							}}
							type="primary">
							新建
						</Button>,
					]}
				/>
				<AddBaiduOssConfigDrawer />
			</div>
		</>
	);
};

export default BaiduSettings;
