import {
  applicationConfig,
  Meta,
  moduleMetadata,
  StoryObj,
} from '@storybook/angular';
import { CaMainTableComponent } from './ca-main-table.component';
import { importProvidersFrom } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { of } from 'rxjs';

const meta: Meta<CaMainTableComponent> = {
  title: 'Example/Table',
  component: CaMainTableComponent,
  tags: ['autodocs'],
  decorators: [
    applicationConfig({
      providers: [importProvidersFrom(BrowserAnimationsModule)],
    }),
    moduleMetadata({
      imports: [],
      providers: [],
    }),
  ],
  argTypes: {},
};

export default meta;
type Story = StoryObj<CaMainTableComponent>;

const formTemplate: string = `
   <app-ca-main-table 
      [columns]="columns"
      [data$]="data$"
      [reorderTemplate]="reorderTemplate"
    >
    </app-ca-main-table>


    <ng-template #reorderTemplate let-row="row" let-index="index">
  <td class="text-center">
      <div class="td-container">
          <div class="td-content-container with-padding">
             TEST PREVIEW
          </div>
      </div>
  </td>
  <td colspan="4">
      <div class="td-container">
          <div class="td-content-container">
              <div class="custom-load-index text-color-black text b-600">
                  Total
              </div>
          </div>
      </div>
  </td>
  <td class="w-100 text-right">
      <div class="td-container">
          <div class="td-content-container">
              <div class="dragg-move-end-period">DRAG TO MOVE END PERIOD</div>
          </div>
      </div>
  </td>
  </ng-template>
`;

export const MainTable: Story = {
  render: (args) => ({
    props: {
      ...args,
      columns: [
        {
          header: 'Name',
          field: 'loadNumber',
          cellType: 'text',
        },
        {
          header: 'Payroll',
          field: 'address',
          cellType: 'text',
        },
        {
          header: 'Period ST',
          field: 'periodStart',
          cellType: 'text', // Pass the template reference
        },
        {
          header: 'Status',
          field: 'payrollDeadLine',
          cellType: 'text',
        },
        {
          header: 'Empty',
          field: 'emptyMiles',
          headerCellType: 'template',
          cellType: 'text',
        },
        {
          header: 'Loaded',
          headerCellType: 'template',
          cellType: 'text',
        },
        {
          header: 'Total',
          field: 'loadDate',
          headerCellType: 'template',
          cellType: 'text',
        },
        {
          header: 'Salary',
          field: 'salary',
          pipeType: 'currency',
          pipeString: 'USD',
          cellCustomClasses: 'text-center',
          cellType: 'text', // Pass the template reference
          hiddeOnTableReduce: true,
        },
        {
          header: 'Total',
          field: 'total',
          pipeType: 'currency',
          pipeString: 'USD',
          cellType: 'text',
          cellCustomClasses: 'text-right',
          textCustomClasses: 'b-600',
          // Pass the template reference
        },
      ],
      data$: of(
        [
          {
            "id": 327,
            "truckNumber": "3333",
            "status": 0,
            "owner": null,
            "color": null,
            "truckType": {
              "id": 2,
              "companyId": null,
              "name": "Semi Sleeper",
              "logoName": "ic_truck_semi-wSleeper.svg"
            },
            "truckMakeName": null,
            "model": null,
            "year": 0,
            "vin": null,
            "usedAsSubstitute": null,
            "rowType": "truck"
          },
          {
            "id": 3223,
            "address": "70 Linden Boulevard, Brooklyn, NY, US",
            "loadId": -1,
            "stopType": {
              "name": "Delivery",
              "id": 2
            },
            "type": 0,
            "orderNumber": 1,
            "date": "03/09/25",
            "time": "04:45:33",
            "leg": 0,
            "empty": 0,
            "loaded": 0,
            "miles": 0,
            "extraStopFee": null,
            "subtotal": 0,
            "latitude": 0,
            "longitude": 0,
            "isLoaded": false,
            "isExtraStop": false,
            "isLoad": false,
            "loadNumber": null,
            "addressEntity": null,
            "entityName": null,
            "loadDate": "2025-03-09T16:45:40.678737"
          },
          {
            "id": 6374,
            "rowType": "reorder"
          }
        ]
      )
    },
    template: formTemplate,
  }),
};