import SaveOutlined from "@mui/icons-material/SaveOutlined";
import Drawer from "@mui/material/Drawer";
import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
import { Button } from "@/shared/ui/Button.jsx";
import { ResourceGroupSelectField } from "@/shared/ui/ResourceGroupSelectDrawer.jsx";
import styles from "@/features/seven-day-checkin/seven-day-checkin.module.css";

export function SevenDayCheckInConfigDrawer({
    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 }))}
                        />
                    </div>
                </section>
                <section className="form-drawer__section">
                    <div className="form-drawer__section-title">奖励内容</div>
                    <div className={styles.rewardEditor}>
                        {form.rewards.map((reward, index) => (
                            <div className={styles.rewardEditorRow} key={reward.dayIndex}>
                                <span className={styles.dayLabel}>第 {reward.dayIndex} 天</span>
                                <ResourceGroupSelectField
                                    disabled={disabled}
                                    groups={resourceGroups}
                                    value={reward.resourceGroupId}
                                    onChange={(value) =>
                                        setForm((current) => ({
                                            ...current,
                                            rewards: current.rewards.map((item, itemIndex) =>
                                                itemIndex === index ? { ...item, resourceGroupId: value } : item,
                                            ),
                                        }))
                                    }
                                />
                            </div>
                        ))}
                    </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>
    );
}
