import {
  StoryObj,
  Meta,
  moduleMetadata,
  applicationConfig,
} from '@storybook/angular';
import { importProvidersFrom } from '@angular/core';

// modules
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { HttpClientModule } from '@angular/common/http';
import { NgxMaskModule } from 'ngx-mask';

// enums
import { LogoChangeEnum } from '../ca-logo-change/enums/logo-change.enum';

// components
import { CaLogoChangeComponent } from './ca-logo-change.component';

export default {
  title: 'Example/CaLogoChangeComponent',
  component: CaLogoChangeComponent,
  decorators: [
    applicationConfig({
      providers: [importProvidersFrom(BrowserAnimationsModule)],
    }),
    moduleMetadata({
      imports: [
        // modules
        AngularSvgIconModule.forRoot(),
        NgxMaskModule.forRoot(),
        HttpClientModule,
      ],
      providers: [SvgIconRegistryService],
    }),
  ],

  tags: ['autodocs'],
  argTypes: {
    imageToCrop: {
      control: LogoChangeEnum.TEXT,
      defaultValue: LogoChangeEnum.EMPTY_STRING_PLACEHOLDER,
    },
    isRoundCropper: {
      control: LogoChangeEnum.BOOLEAN,
      defaultValue: false,
    },
    sendImageData: { action: LogoChangeEnum.SEND_IMAGE_DATA },
  },
} as Meta;

type Story = StoryObj<CaLogoChangeComponent>;

export const LogoChange: Story = {
  args: {
    imageToCrop: LogoChangeEnum.EMPTY_STRING_PLACEHOLDER,
  },
};