import TextField from "@mui/material/TextField";
import {
    AdminFormDialog,
    AdminFormList,
    AdminFormListRow,
    AdminFormSection,
    AdminFormSwitchField,
} from "@/shared/ui/AdminFormDialog.jsx";

export function GiftTypeConfigDialog({
    disabled,
    form,
    loading,
    onChangeItem,
    onClose,
    onSubmit,
    open,
    optionsLoading,
}) {
    const items = form?.items || [];
    return (
        <AdminFormDialog
            disabled={disabled}
            loading={loading}
            open={open}
            size="large"
            submitDisabled={disabled || loading || optionsLoading}
            submitLabel="保存"
            title="礼物类型"
            onClose={onClose}
            onSubmit={onSubmit}
        >
            <AdminFormSection title="Tab 配置">
                <AdminFormList>
                    {items.map((item, index) => (
                        <AdminFormListRow
                            columns="minmax(112px, 0.65fr) minmax(148px, 1fr) minmax(132px, 0.9fr) minmax(88px, 0.5fr) minmax(96px, 0.45fr)"
                            key={item.tabKey}
                        >
                            <TextField disabled label="Tab Key" value={item.tabKey} />
                            <TextField
                                disabled={disabled}
                                label="显示名称"
                                required
                                value={item.displayName}
                                onChange={(event) => onChangeItem(index, { displayName: event.target.value })}
                            />
                            <TextField
                                disabled={disabled}
                                label="Tab Name"
                                required
                                value={item.tabName}
                                onChange={(event) => onChangeItem(index, { tabName: event.target.value })}
                            />
                            <TextField
                                disabled={disabled}
                                label="排序"
                                type="number"
                                value={item.sortOrder}
                                onChange={(event) => onChangeItem(index, { sortOrder: event.target.value })}
                            />
                            <AdminFormSwitchField
                                checked={item.enabled}
                                checkedLabel="开"
                                disabled={disabled}
                                label="Tab"
                                uncheckedLabel="关"
                                onChange={(enabled) => onChangeItem(index, { enabled })}
                            />
                        </AdminFormListRow>
                    ))}
                </AdminFormList>
            </AdminFormSection>
        </AdminFormDialog>
    );
}
