import {
    DrawerForm,
    ProFormSelect,
    ProFormText,
} from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import React from 'react';

export type UpdateFormProps = {
    onCancel: (visible: boolean) => void;
    onSubmit: (values: API.UserItem) => Promise<void>;
    updateModalOpen: boolean;
    values: Partial<API.UserItem>;
    title?: string;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
    const intl = useIntl();

    return (
        <DrawerForm
            title={props.title || intl.formatMessage({
                id: 'pages.userManagement.form.new',
                defaultMessage: 'New User',
            })}
            width={400} // Small drawer for simple forms
            open={props.updateModalOpen}
            onOpenChange={props.onCancel}
            onFinish={props.onSubmit}
            initialValues={props.values}
        >
            <ProFormText
                name="username"
                label={intl.formatMessage({
                    id: 'pages.userManagement.columns.username',
                    defaultMessage: 'Username',
                })}
                width="md"
                rules={[
                    {
                        required: true,
                        message: intl.formatMessage({
                            id: 'pages.userManagement.form.username.required',
                            defaultMessage: 'Please enter username',
                        }),
                    },
                ]}
            />
            <ProFormText
                name="realName"
                label={intl.formatMessage({
                    id: 'pages.userManagement.columns.realName',
                    defaultMessage: 'Real Name',
                })}
                width="md"
                rules={[
                    {
                        required: true,
                        message: intl.formatMessage({
                            id: 'pages.userManagement.form.realName.required',
                            defaultMessage: 'Please enter real name',
                        }),
                    },
                ]}
            />
            <ProFormText
                name="mobile"
                label={intl.formatMessage({
                    id: 'pages.userManagement.columns.mobile',
                    defaultMessage: 'Mobile',
                })}
                width="md"
                rules={[
                    {
                        required: true,
                        message: intl.formatMessage({
                            id: 'pages.userManagement.form.mobile.required',
                            defaultMessage: 'Please enter mobile',
                        }),
                    },
                ]}
            />
            <ProFormText
                name="email"
                label={intl.formatMessage({
                    id: 'pages.userManagement.columns.email',
                    defaultMessage: 'Email',
                })}
                width="md"
                rules={[
                    {
                        required: true,
                        message: intl.formatMessage({
                            id: 'pages.userManagement.form.email.required',
                            defaultMessage: 'Please enter email',
                        }),
                        type: 'email',
                    },
                ]}
            />
            <ProFormSelect
                name="role"
                width="md"
                label={intl.formatMessage({
                    id: 'pages.userManagement.columns.role',
                    defaultMessage: 'Role',
                })}
                valueEnum={{
                    admin: intl.formatMessage({
                        id: 'pages.userManagement.role.admin',
                        defaultMessage: 'Admin',
                    }),
                    user: intl.formatMessage({
                        id: 'pages.userManagement.role.user',
                        defaultMessage: 'User',
                    }),
                }}
                rules={[
                    {
                        required: true,
                        message: intl.formatMessage({
                            id: 'pages.userManagement.form.role.required',
                            defaultMessage: 'Please select role',
                        }),
                    },
                ]}
            />
            <ProFormSelect
                name="status"
                width="md"
                label={intl.formatMessage({
                    id: 'pages.userManagement.columns.status',
                    defaultMessage: 'Status',
                })}
                valueEnum={{
                    active: intl.formatMessage({
                        id: 'pages.userManagement.status.active',
                        defaultMessage: 'Active',
                    }),
                    disabled: intl.formatMessage({
                        id: 'pages.userManagement.status.disabled',
                        defaultMessage: 'Disabled',
                    }),
                    pending: intl.formatMessage({
                        id: 'pages.userManagement.status.pending',
                        defaultMessage: 'Pending',
                    }),
                }}
                rules={[
                    {
                        required: true,
                        message: intl.formatMessage({
                            id: 'pages.userManagement.form.status.required',
                            defaultMessage: 'Please select status',
                        }),
                    },
                ]}
            />
        </DrawerForm>
    );
};

export default UpdateForm;
