import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
import { SwitchComponent, IconSwitchColor } from '@isa/ui/switch';
import { provideIcons } from '@ng-icons/core';
import { isaFiliale, IsaIcons, isaNavigationDashboard } from '@isa/icons';

type IconSwitchComponentInputs = {
  icon: string;
  checked: boolean;
  color: IconSwitchColor;
  disabled: boolean;
};

const meta: Meta<IconSwitchComponentInputs> = {
  component: SwitchComponent,
  title: 'ui/switch/IconSwitch',
  decorators: [
    (story) => ({
      ...story(),
      applicationConfig: {
        providers: [provideIcons(IsaIcons)],
      },
    }),
  ],
  argTypes: {
    icon: {
      control: { type: 'select' },
      options: Object.keys(IsaIcons),
      description: 'The name of the icon to display in the switch',
    },
    checked: {
      control: 'boolean',
      description: 'Whether the switch is checked (on) or not (off)',
    },
    color: {
      control: { type: 'select' },
      options: Object.values(IconSwitchColor),
      description: 'Determines the switch color theme',
    },
    disabled: {
      control: 'boolean',
      description: 'Disables the switch when true',
    },
  },
  args: {
    icon: 'isaFiliale',
    checked: false,
    color: 'primary',
    disabled: false,
  },
  render: (args) => ({
    props: args,
    template: `<ui-switch ${argsToTemplate(args)}></ui-switch>`,
  }),
};
export default meta;

type Story = StoryObj<SwitchComponent>;

export const Default: Story = {
  args: {},
};

export const Enabled: Story = {
  args: {
    checked: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          'The switch in its enabled/checked state with the primary color theme.',
      },
    },
  },
};

export const Disabled: Story = {
  args: {
    checked: false,
    disabled: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          'The switch in a disabled state. User interactions are prevented.',
      },
    },
  },
};

export const EnabledAndDisabled: Story = {
  args: {
    checked: true,
    disabled: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'The switch in both enabled and disabled states simultaneously.',
      },
    },
  },
};
