import { action } from '@storybook/addon-actions';
import { Meta, Story } from '@storybook/react';
import React from 'react';
import { JoystickDPad } from '../../../components/DPad/JoystickDPad';

export default {
  title: 'UI/Joystick/DPad',
  component: JoystickDPad,
  argTypes: {
    options: {
      control: 'object',
    },
    disabled: {
      control: 'boolean',
    },
  },
} as Meta;

const Template: Story = args => <JoystickDPad {...args} />;

export const Default = Template.bind({});
Default.args = {
  onDirectionPress: (direction: 'up' | 'down' | 'left' | 'right') => {
    console.log(`Direction pressed: ${direction}`);
    action(`Direction pressed`)(direction);
  },
};

export const WithBackground = Template.bind({});
WithBackground.args = {
  ...Default.args,
  options: {
    showBackground: true,
  },
};

export const WithCustomOptions = Template.bind({});
WithCustomOptions.args = {
  ...Default.args,
  options: {
    size: 150,
    opacity: 0.8,
    pressInterval: 100,
    showBackground: true,
  },
};

export const Disabled = Template.bind({});
Disabled.args = {
  ...Default.args,
  disabled: true,
};
