import { CommonModule } from '@angular/common';
import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
import { HttpClientModule } from '@angular/common/http';
import { AngularSvgIconModule } from 'angular-svg-icon';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

// Directives
import { AutoResizeDirective } from './directives';

// Components
import { CaCommentComponent } from './ca-comment.component';

// Pipes
import { DateFormatPipe } from '../../pipes/date.pipe';

// Models
import {
  DeleteCommentData,
  SaveCommentData,
  UpdateCommentData,
} from './models';

//Services
import { AppModalService } from './services';

const meta: Meta<CaCommentComponent> = {
  title: 'Example/Comment',
  component: CaCommentComponent,
  parameters: {
    layout: 'centered',
  },
  decorators: [
    moduleMetadata({
      imports: [
        CommonModule,
        AngularSvgIconModule.forRoot(),
        HttpClientModule,
        AutoResizeDirective,
        NgbModule,
      ],
      providers: [DateFormatPipe, AppModalService],
    }),
  ],
  tags: ['autodocs'],
  argTypes: {
    owner: {
      control: 'boolean',
    },
    createdAt: {
      control: 'date',
    },
    updatedAt: {
      control: 'date',
    },
    content: {
      control: 'text',
    },
    user: {
      control: 'object',
    },
    onSave: { action: 'onSave' },
    onUpdate: { action: 'onUpdate' },
    onDelete: { action: 'onDelete' },
  },
  args: {
    owner: true,
    createdAt: new Date(''),
    updatedAt: new Date(''),
    content: '',
    user: {
      avatarImage:
        'https://nyc3.digitaloceanspaces.com/dev.truckassist/9/38/138/a3c5ef96-58cf-4018-a3c0-2855ad1edf69-driverAvatar.png',
      name: 'Angelo Trotter',
    },
  },
} as Meta<CaCommentComponent>;

export default meta;

type Story = StoryObj<CaCommentComponent>;

export const NewComment: Story = {
  args: {
    config: {
      user: {
        avatarImage:
          'https://nyc3.digitaloceanspaces.com/dev.truckassist/9/38/138/a3c5ef96-58cf-4018-a3c0-2855ad1edf69-driverAvatar.png',
        name: 'Angelo Trotter',
      },
      owner: true,
      content: '',
    },
    onSave: (data: SaveCommentData) => console.log('saved data: ', data),
  },
};

export const NormalComment: Story = {
  args: {
    config: {
      id: 1,
      user: {
        avatarImage:
          'https://nyc3.digitaloceanspaces.com/dev.truckassist/9/38/138/a3c5ef96-58cf-4018-a3c0-2855ad1edf69-driverAvatar.png',
        name: 'Angelo Trotter',
      },
      owner: false,
      createdAt: new Date(),
      updatedAt: new Date(),
      content:
        'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
    },
  },
};

export const OwnerComment: Story = {
  args: {
    config: {
      id: 357,
      user: {
        avatarImage:
          'https://nyc3.digitaloceanspaces.com/dev.truckassist/9/38/138/a3c5ef96-58cf-4018-a3c0-2855ad1edf69-driverAvatar.png',
        name: 'John Doe',
      },
      owner: true,
      createdAt: new Date(),
      updatedAt: new Date('2024-08-20'),
      content: 'This comment is editable.',
    },
    onUpdate: (data: UpdateCommentData) => console.log('updated data: ', data),
    onSave: (data: SaveCommentData) => console.log('saved data: ', data),
    onDelete: (data: DeleteCommentData) => console.log('deleted data:', data),
  },
};