import SaveOutlined from "@mui/icons-material/SaveOutlined";
import Drawer from "@mui/material/Drawer";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
import { Button } from "@/shared/ui/Button.jsx";

const rewardTypeOptions = [
    ["coin", "金币"],
    ["resource_group", "资源组"],
];

export function RegistrationRewardConfigDrawer({
    abilities,
    configLoading,
    configSaving,
    form,
    onClose,
    onSubmit,
    open,
    resourceGroups,
    setForm,
}) {
    const disabled = !abilities.canUpdate || configLoading || configSaving;

    return (
        <Drawer anchor="right" open={open} onClose={configSaving ? undefined : onClose}>
            <form className="form-drawer" onSubmit={onSubmit}>
                <h2>注册奖励配置</h2>
                <section className="form-drawer__section">
                    <div className="form-drawer__section-title">发放状态</div>
                    <div className="form-drawer__grid">
                        <AdminSwitch
                            checked={form.enabled}
                            checkedLabel="开启"
                            disabled={disabled}
                            label="注册奖励状态"
                            uncheckedLabel="关闭"
                            onChange={(event) =>
                                setForm((current) => ({ ...current, enabled: event.target.checked }))
                            }
                        />
                        <TextField
                            disabled={disabled}
                            inputProps={{ min: 0 }}
                            label="每日限制份数"
                            type="number"
                            value={form.dailyLimit}
                            onChange={(event) =>
                                setForm((current) => ({ ...current, dailyLimit: event.target.value }))
                            }
                        />
                    </div>
                </section>
                <section className="form-drawer__section">
                    <div className="form-drawer__section-title">奖励内容</div>
                    <div className="form-drawer__grid">
                        <TextField
                            select
                            disabled={disabled}
                            label="奖励类型"
                            value={form.rewardType}
                            onChange={(event) =>
                                setForm((current) => ({ ...current, rewardType: event.target.value }))
                            }
                        >
                            {rewardTypeOptions.map(([value, label]) => (
                                <MenuItem key={value} value={value}>
                                    {label}
                                </MenuItem>
                            ))}
                        </TextField>
                        {form.rewardType === "resource_group" ? (
                            <TextField
                                select
                                disabled={disabled}
                                label="资源组"
                                value={form.resourceGroupId}
                                onChange={(event) =>
                                    setForm((current) => ({
                                        ...current,
                                        resourceGroupId: event.target.value,
                                    }))
                                }
                            >
                                <MenuItem value="">请选择资源组</MenuItem>
                                {resourceGroups.map((group) => (
                                    <MenuItem key={group.groupId} value={String(group.groupId)}>
                                        {group.name || group.groupCode || group.groupId}
                                    </MenuItem>
                                ))}
                            </TextField>
                        ) : (
                            <TextField
                                disabled={disabled}
                                inputProps={{ min: 1 }}
                                label="金币数量"
                                type="number"
                                value={form.coinAmount}
                                onChange={(event) =>
                                    setForm((current) => ({ ...current, coinAmount: event.target.value }))
                                }
                            />
                        )}
                    </div>
                </section>
                <div className="form-drawer__actions">
                    <Button disabled={configSaving} type="button" onClick={onClose}>
                        取消
                    </Button>
                    <Button
                        disabled={disabled}
                        startIcon={<SaveOutlined fontSize="small" />}
                        type="submit"
                        variant="primary"
                    >
                        保存
                    </Button>
                </div>
            </form>
        </Drawer>
    );
}