import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { argsToTemplate, componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { SliderComponent } from '../../public-api';

/**
 * `<nj-slider>` is compatible with `@angular/forms` and supports both `FormsModule` and `ReactiveFormsModule`
 */
const meta: Meta<SliderComponent> = {
  title: 'Components/Slider',
  id: 'slider',
  component: SliderComponent,
  decorators: [
    moduleMetadata({
      imports: [FormsModule, ReactiveFormsModule]
    }),
    componentWrapperDecorator(
      (story) => `
        <div style="padding: var(--nj-semantic-size-spacing-24) var(--nj-semantic-size-spacing-16)">${story}</div>
    `
    )
  ],
  argTypes: {
    value: {
      table: {
        defaultValue: {
          summary: 'min value'
        }
      }
    },
    min: {
      table: {
        defaultValue: {
          summary: '0'
        }
      }
    },
    max: {
      table: {
        defaultValue: {
          summary: '100'
        }
      }
    }
  },
  parameters: {
    docs: {
      imports: [SliderComponent]
    }
  }
};

export default meta;

type Story = StoryObj<SliderComponent>;

export const Slider: Story = {
  args: {
    value: 20
  }
};

/**
 * `SliderComponent` implements `ControlValueAccessor` interface. It can be interfaced with `FormsModule` and `ReactiveFormsModule` APIs
 */
export const WithAngularFormsAPI: Story = {
  name: 'Use core Angular forms APIs',
  render: (args) => ({
    props: {
      ...args,
      value: 20,
      sliderControl: new FormControl(20),
      formControlState() {
        const { pristine, dirty, touched, untouched, value, status, errors } = this.sliderControl;
        return { pristine, dirty, touched, untouched, value, status, errors };
      }
    },
    template: `
    <h3>With ngModel - FormsModule</h3>
    <p>
      <nj-slider [(ngModel)]="value" ${argsToTemplate(args)}></nj-slider>
    </p>
    <pre>Value: {{ value | json }}</pre>
    <hr>
    <h3>With FormControl - ReactiveFormsModule</h3>
    <p>
      <nj-slider [formControl]="sliderControl" ${argsToTemplate(args)}></nj-slider>
    </p>
    <pre>Control: {{ formControlState() | json }}</pre>
    `
  })
};