import { moduleMetadata } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { AuthenticationUiModule } from '../authentication-ui.module';
import { LoginComponent } from './login.component';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { ChangeDetectorRef } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { I18nService, UCAP_I18N_NAMESPACE, I18nModule } from '@ucap/ng-i18n';
import { LogService } from '@ucap/logger';
import { Company } from '@ucap/api-external';

export default {
  title: 'LoginComponent',
  decorators: [
    moduleMetadata({
      imports: [
        BrowserModule,
        BrowserAnimationsModule,

        CommonModule,
        ReactiveFormsModule,

        MatButtonModule,
        MatCheckboxModule,
        MatFormFieldModule,
        MatIconModule,
        MatInputModule,
        MatProgressSpinnerModule,
        MatSelectModule,

        I18nModule
      ],
      providers: [
        AuthenticationUiModule,
        { provide: I18nService, useValue: new I18nService(new LogService({})) },
        {
          provide: UCAP_I18N_NAMESPACE,
          useValue: 'authentication'
        }
      ]
    })
  ],
  excludeStories: /.*Data$/
};

export const actionsData = {
  login: action('login')
};

export const inputData = {
  companyList: [
    { companyName: 'LG CNS', companyCode: 'GUC100' },
    { companyName: 'LG UCAP', companyCode: 'GUC101' }
  ] as Company[]
};

export const Default = () => ({
  component: LoginComponent,
  props: {
    companyList: inputData.companyList,
    login: actionsData.login
  }
});

export const InputContents = () => ({
  component: LoginComponent,
  props: {
    companyList: inputData.companyList,
    companyCode: 'GUC100',
    loginId: 'test-loginid',
    // loginPw: '111111',
    login: actionsData.login
  }
});