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 { CaInputComponent } from './ca-input.component';

// helpers
import { InputSvgRoutes } from './utils/input-svg-routes';

const meta: Meta<CaInputComponent> = {
  title: 'Example/Input',
  component: CaInputComponent,
  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: 'Account Name',
      type: 'text',
      label: 'Account Name',
      isRequired: true,
      maxLength: 23,
      textTransform: 'capitalize',
      isDisabled: false,
    },
    incorrectValue: true,
    selectedDropdownLabelColor: { color: 'yellow' },
  },
};

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

const formGroup = new FormGroup({
  testInput: new FormControl(undefined, [Validators.required]),
});

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

const inputSvgRoutes = InputSvgRoutes;

export const Input: Story = {
  render: (args) => ({
    props: {
      ...args,
      config: args.inputConfig,
      formControlName: 'testInput',
      form: formGroup,
    },
    template: formTemplate,
  }),
};

export const Hover: Story = {
  render: (args) => ({
    props: {
      ...args,
      config: args.inputConfig,
      formControlName: 'testInput',
      form: formGroup,
    },
    template: formTemplate,
  }),
  parameters: {
    pseudo: { hover: true },
  },
};

export const Focus: Story = {
  render: (args) => ({
    props: {
      ...args,
      config: {
        ...args.inputConfig,
        autoFocus: true,
      },
      formControlName: 'testInput',
      form: formGroup,
    },
    template: formTemplate,
  }),
  parameters: {
    pseudo: { focus: true },
  },
};

export const BorderRadius: Story = {
  render: (args) => ({
    props: {
      ...args,
      config: {
        ...args.inputConfig,
        customClass: 'input-border-radius',
      },
      formControlName: 'testInput',
      form: formGroup,
    },
    template: formTemplate,
  }),
};

export const Password: Story = {
  render: (args) => ({
    props: {
      ...args,
      config: {
        ...args.inputConfig,
        name: 'Password',
        type: 'password',
        label: 'Password',
        placeholderIcon: 'password',
      },
      formControlName: 'testInput',
      form: formGroup,
    },
    template: formTemplate,
  }),
};

export const Commands: Story = {
  render: (args) => ({
    props: {
      ...args,
      config: {
        ...args.inputConfig,
        commands: {
          type: 'increment-decrement',
          blueCommands: true,
          firstCommand: {
            name: 'decrement',
            svg: inputSvgRoutes.decrementSvg,
          },
          secondCommand: {
            name: 'increment',
            svg: inputSvgRoutes.incrementSvg,
          },
        },
      },
      formControlName: 'testInput',
      form: formGroup,
    },
    template: formTemplate,
  }),
};

export const CommandsMonths: Story = {
  render: (args) => ({
    props: {
      ...args,
      config: {
        ...args.inputConfig,
        commands: {
          active: true,
          type: 'months',
          firstCommand: {
            name: 'minus',
            svg: inputSvgRoutes.decrementSvg,
          },
          secondCommand: {
            name: 'plus',
            svg: inputSvgRoutes.incrementSvg,
          },
        },
      },
      formControlName: 'testInput',
      form: formGroup,
    },
    template: formTemplate,
  }),
};

export const CommandsPM: Story = {
  render: (args) => ({
    props: {
      config: {
        ...args.inputConfig,
        name: 'MILEAGE',
        type: 'text',
        commands: {
          active: true,
          type: 'pm-increment-decrement',
          blueCommands: true,
          firstCommand: {
            name: 'decrement',
            svg: inputSvgRoutes.decrementSvg,
          },
          secondCommand: {
            name: 'increment',
            svg: inputSvgRoutes.incrementSvg,
          },
          thirdCommand: {
            name: 'reset',
            svg: inputSvgRoutes.inputPenSvg,
          },
        },
        thousandSeparator: true,
        hideErrorMessage: true,
        blueInput: true,
        hideRequiredCheck: true,
        maxLength: 999999999,
        defaultValue: 150000,
      },
      formControlName: 'testInput',
      form: formGroup,
    },
    template: formTemplate,
  }),
};

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

// export const DatePickerTwo: Story = {
//   render: (args) => ({
//     props: {
//       ...args,
//       config: {
//         ...args.inputConfig,
//         name: 'datepicker',
//         type: 'text',
//         isDropdown: true,
//         isIconHidden: true,
//         hideClear: true,
//         hideErrorMessage: true,
//         customClass: 'datetimeclass',
//         hideDropdownArrow: true,
//       },
//       formControlName: 'testInput',
//       form: formGroup,
//     },
//     template: formTemplate,
//   }),
// };

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

// 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,
//       },
//       formControlName: 'testInput',
//       form: formGroup,
//     },
//     template: formTemplate,
//   }),
// };

export const Price: Story = {
  render: (args) => ({
    props: {
      ...args,
      config: {
        ...args.inputConfig,
        name: 'price-separator',
        type: 'text',
        label: 'Base Rate',
        labelInInput: true,
        isRequired: true,
        priceSeparator: true,
        priceSeparatorLimitation: 16,
        placeholderIconRightSide: 'dollar',
        placeholderIconColor: 'blue',
        inputCursorOnRightSide: true,
        hideErrorMessage: true,
        errorInsideInput: true,
        hideRequiredCheck: true,
        max: 2146.92,
      },
      formControlName: 'testInput',
      form: formGroup,
    },
    template: formTemplate,
  }),
};

export const PriceSecondary: Story = {
  render: (args) => ({
    props: {
      ...args,
      config: {
        name: 'price-separator',
        type: 'text',
        label: 'test',
        labelInInput: true,
        priceSeparator: true,
        priceSeparatorLimitation: 6,
        placeholderIconRightSide: 'dollar',
        placeholderIconColor: 'green',
        inputCursorOnRightSide: true,
        removeInput: true,
        isRequired: true,
        hideErrorMessage: true,
        hideRequiredCheck: true,
        hideDangerMark: true,
        errorInsideInput: true,
      },
      formControlName: 'testInput',
      form: formGroup,
    },
    template: formTemplate,
  }),
};

export const InputReqiredLabelTabel: Story = {
  render: (args) => ({
    props: {
      ...args,
      config: {
        name: 'First Name',
        type: 'text',
        label: 'Full Name',
        placeholderInsteadOfLabel: true,
        isRequired: true,
        requiredLabel: true,
        minLength: 5,
        maxLength: 64,
        textTransform: 'capitalizedcase',
        hideErrorMessage: true,
        hideRequiredCheck: true,
      },
      formControlName: 'testInput',
      form: formGroup,
    },
    template: formTemplate,
  }),
};