import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {
    FormControl,
    FormGroup,
    FormsModule,
    ReactiveFormsModule,
    Validators,
} from '@angular/forms';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

// modules
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxMaskModule } from 'ngx-mask';

// components
import { CaInputDatetimePickerComponent } from './ca-input-datetime-picker.component';

const meta: Meta<CaInputDatetimePickerComponent> = {
    title: 'Example/InputDateTimePicker',
    component: CaInputDatetimePickerComponent,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({
            imports: [
                // Module
                CommonModule,
                FormsModule,
                ReactiveFormsModule,
                AngularSvgIconModule.forRoot(),
                NgxMaskModule.forRoot(),
                HttpClientModule,

                NgbModule,
            ],
            providers: [SvgIconRegistryService],

            schemas: [CUSTOM_ELEMENTS_SCHEMA],
        }),
    ],
    argTypes: {
        inputConfig: {
            control: { type: 'object' },
        },
    },
    args: {
        inputConfig: {
            name: 'datepicker',
            isDisabled: false,
            type: 'text',
        },
    },
};

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

const formGroup = new FormGroup({
    date: new FormControl(
        { value: '2025-05-16T12:27:57.076783', disabled: true },
        [Validators.required]
    ),
    date2: new FormControl(undefined, [Validators.required]),
    time: new FormControl('10:10 AM', [Validators.required]),
    time2: new FormControl(undefined, [Validators.required]),
    dispatchHistory: new FormControl('07/10/25'),
});

const formTemplate: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-datetime-picker
      formControlName="date"
      [inputConfig]="config"
    >
    </ca-input-datetime-picker>
  </form>
`;

export const DatetimePicker: Story = {
    render: (args) => ({
        props: {
            ...args,
            config: {
                ...args.inputConfig,
                name: 'datepicker',
                type: 'text',
                label: 'DOB',
                isDropdown: true,
                placeholderIcon: 'date',
                isRequired: true,
                customClass: 'datetimeclass',
            },
            form: formGroup,
        },
        template: formTemplate,
    }),
};

const formDateTemplate: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-datetime-picker
      formControlName="date2"
      [inputConfig]="config"
    >
    </ca-input-datetime-picker>
  </form>
`;

export const DateDtimePicker: Story = {
    render: (args) => ({
        props: {
            ...args,
            config: {
                ...args.inputConfig,
                name: 'datepicker',
                type: 'text',
                label: 'DOB',
                isDropdown: true,
                placeholderIcon: 'date',
                isRequired: true,
                customClass: 'datetimeclass',
            },
            form: formGroup,
        },
        template: formDateTemplate,
    }),
};

const time2Template: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-datetime-picker
      [formFormat]="'HH:mm'"
      formControlName="time2"
      [inputConfig]="config"
    >
    </ca-input-datetime-picker>
  </form>`;

export const TimePicker: Story = {
    render: (args) => {
        setTimeout(() => {
            formGroup.get('time2')?.setValue('10:10 PM' as never); // ✅ Simulates user input
        }, 5000);
        return {
            props: {
                ...args,
                config: {
                    ...args.inputConfig,
                    name: 'timepicker',
                    type: 'text',
                    label: 'From',
                    placeholderIcon: 'time',
                    isDropdown: true,
                    isRequired: true,
                    customClass: 'datetimeclass',
                },
                form: formGroup,
            },
            template: time2Template,
        };
    },
};

const timeTemplate: string = `
  <form style='width: 400px' [formGroup]="form">
  {{form.get('time').value}}
    <ca-input-datetime-picker
      [formFormat]="'HH:mm'"
      formControlName="time"
      [inputConfig]="config"
    >
    </ca-input-datetime-picker>
  </form>`;

export const TimePickerMinutesGapFive: Story = {
    render: (args) => ({
        props: {
            ...args,
            config: {
                ...args.inputConfig,
                name: 'timepicker',
                type: 'text',
                label: 'From',
                placeholderIcon: 'time',
                isDropdown: true,
                customClass: 'datetimeclass',
                minutesGapFive: true,
            },
            form: formGroup,
        },
        template: timeTemplate,
    }),
};

const dispatchHistoryTemplate: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-datetime-picker
      formControlName="dispatchHistory"
      [inputConfig]="config"
    >
    </ca-input-datetime-picker>
  </form>
`;

export const DispatchboardHistoryPicker: Story = {
    render: (args) => {
        setTimeout(() => {
            console.log("SET AS INVALID");
            formGroup.get('dispatchHistory')?.setErrors({invalid: true}) // ✅ Simulates user input
        }, 3000);

        return {
            props: {
                ...args,
                config: {
                    name: 'datepicker',
                    type: 'text',
                    isDropdown: true,
                    isIconHidden: true,
                    transparentInput: true,
                    hideClear: true,
                    hideErrorMessage: true,
                },
                form: formGroup
            },
            template: dispatchHistoryTemplate,
        };
    },
};