import { Assets, Ticker } from 'pixi.js';
import { Meta, PixiStory, StoryFn } from '@pixi/storybook-renderer';
import ReelsMachine from 'src/slotMachines/ReelsMachine';
import { argTypes, getDefaultArgs } from 'src/stories/utils/argTypes';
import { createScreenInputMap } from 'src/stories/utils/createScreenInputMap';
import MachineContainer from 'src/stories/utils/MachineContainer';
import { centerView } from 'src/stories/utils/resize';
import MockSystem from 'src/systems/MockSystem';
import BlurSymbolsSystem, { BlurSymbolsSystemSettings } from 'src/systems/BlurSymbolsSystem';
import MaskingSystem from 'src/systems/MaskingSystem';
import { STATES } from 'src/states/ClassicReelsStateMachine';
import { SlotMachineConfig } from 'src/types/SlotMachineConfig';

const args = {
    velocityX: 0,
    velocityY: -50,
    kernelSize: 15,
    offset: 7,
};

const meta: Meta<typeof BlurSymbolsSystem> = {
    title: 'Systems/BlurSymbolsSystem',
    tags: ['autodocs'],
    parameters: {
        docs: {
            story: {
                height: 600,
            },
            description: {
                component: 'Adjust the blur filter velocity, kernel size, and offset to preview motion blur strength while the reels spin. The story mirrors the standard machine boot flow and calls `setSettings` so designers can iterate on blur intensity in real time.',
            },
        },
    },
    argTypes: argTypes(args),
    args: getDefaultArgs(args),
};

export default meta;

export const BlurSymbolsSystemStory: StoryFn<typeof args> = (_params, context) => new PixiStory({
    context,
    init: async (view) =>
    {
        Assets.reset();
        await Assets.init({
            manifest: 'area69/manifest.json',
        });
        await Assets.loadBundle('configs');
        await Assets.loadBundle('symbols');

        const config: SlotMachineConfig = Assets.get('slot_machine_config');
        const machine = new ReelsMachine(config);
        machine.systems.masking = new MaskingSystem(machine);
        machine.stateMachine.states[STATES.SPINNING].systems.push('masking');
        const container = new MachineContainer(machine, false);

        view.addChild(container);
        context.machine = machine;
        machine.systems.blockExitState = new MockSystem(machine);
        machine.inputs.initMap = createScreenInputMap(config);
        machine.inputs.screenMap = createScreenInputMap(config);

        const blurSettings: Partial<BlurSymbolsSystemSettings> = {
            velocity: [_params.velocityX, _params.velocityY],
            kernelSize: _params.kernelSize,
            offset: _params.offset,
        };
        (machine.systems.blurSymbols as BlurSymbolsSystem).setSettings(blurSettings);

        machine.inputs.spin = true;

        machine.inputs.blockExitState = true;
        setTimeout(() =>
        {
            machine.inputs.blockExitState = false;
        }, 250);
        centerView(view);
    },
    resize: centerView,
    update: () =>
    {
        context.machine && context.machine.update(Ticker.shared.deltaMS);
    }
});