import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { IconComponent, ToggleComponent, ToggleIconDirective } from '../../public-api';

type ToggleWithLabel = ToggleComponent & { label: string };

/**
 * `<nj-toggle>` is compatible with `@angular/forms` and supports both `FormsModule` and `ReactiveFormsModule`
 */
const meta: Meta<ToggleWithLabel> = {
  title: 'Components/Toggle',
  id: 'toggle',
  component: ToggleComponent,
  argTypes: {
    isChecked: {
      table: {
        defaultValue: {
          summary: 'false'
        }
      }
    },
    isDisabled: {
      table: {
        defaultValue: {
          summary: 'false'
        }
      }
    },
    label: {
      description:
        'Note that this is not an `@Input()`, it should be placed inside `<nj-toggle>`. By default, it goes to the right of the toggle. This can be any custom content allowed inside a `<span>` element (eg: an icon)'
    },
    inputId: {
      control: {
        type: null
      }
    },
    name: {
      control: {
        type: null
      }
    },
    required: {
      control: {
        type: null
      }
    },
    ariaLabel: {
      control: {
        type: null
      }
    },
    ariaLabelledby: {
      control: {
        type: null
      }
    },
    valueChange: {
      control: {
        type: null
      }
    }
  },
  decorators: [
    moduleMetadata({
      imports: [ToggleIconDirective, IconComponent]
    })
  ],
  parameters: {
    docs: {
      since: '0.1.0',
      imports: [ToggleComponent, ToggleIconDirective]
    }
  }
};

export default meta;

type Story = StoryObj<ToggleWithLabel>;

export const Toggle: Story = {
  args: {
    inputId: 'toggle1',
    label: 'Label'
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-toggle ${argsToTemplate(args, { exclude: ['label'] })}>
      {{label}}
    </nj-toggle>
    `
  })
};
export const ToggleWithIcon: Story = {
  render: () => ({
    template: `
    <nj-toggle id="toggle2" label="Show settings">
      <nj-icon name="settings" njToggleIcon></nj-icon>
      Label
    </nj-toggle>
  `
  })
};