import { JobArgumentSchemaValidationError } from '@angular-devkit/core/src/experimental/jobs';
import { withA11y } from '@storybook/addon-a11y';
import { moduleMetadata } from '@storybook/angular';
import { GaugeComponent } from '../../visualizations/gauge/gauge.component';
import { GaugeModule } from '../../visualizations/gauge/gauge.module';
import { OnguardButtonModule } from '../../visualizations/onguard-button/onguard-button.module';

import { SoftCardComponent } from './soft-card.component';
import { SoftCardModule } from './soft-card.module';

export default {
    title: 'Structure/Soft Card',
    component: SoftCardComponent,
    decorators: [
        withA11y,
        moduleMetadata({
            imports: [SoftCardModule, OnguardButtonModule, GaugeModule],
        }),
    ],
};

export const basic = () => ({
    component: SoftCardComponent,
    template: `
<onguard-soft-card [size]="size">
  <span style="margin-bottom: 30px;" >Total call vectors</span>
  <span style="font-size: 72px;">224</span>
</onguard-soft-card>`,
});

const buttonElement = `<onguard-button [type]="'neutral'" style="margin: 2px; display: inline-block">Vector</onguard-button>`;
export const button = () => ({
    component: SoftCardComponent,
    template: `
<onguard-soft-card> 
  <span style="margin-bottom: 30px;">Vectors that jump to non-existent vectors</span>
  ${buttonElement}
</onguard-soft-card>`,
});

export const largeSoftCard = (args: SoftCardComponent) => ({
    component: SoftCardComponent,
    props: args,
    template: `
<onguard-soft-card [size]="size"> 
  <span style="margin-bottom: 30px;">Vectors that do not reference any other vector</span>
  <div>
    ${buttonElement.repeat(25)}
  </div>
</onguard-soft-card>`,
});
largeSoftCard.args = {
    size: 'large',
};

export const gauge = () => ({
    component: SoftCardComponent,
    subcomponents: { GaugeComponent },
    template: `
<onguard-soft-card> 
  <span style="margin-bottom: 30px;">Vectors that do not reference any other vector</span>
  <onguard-gauge [score]="7" [title]="'Vector Section'" [min]="0" [max]="10"></onguard-gauge>
  <div>
    ${buttonElement.repeat(4)}
  </div>
</onguard-soft-card>`,
});

export const compactSoftCard = (args: SoftCardComponent) => ({
    component: SoftCardComponent,
    props: args,
    template: `
<onguard-soft-card [padding]="padding"> 
  <span style="margin-bottom: 30px;">Vectors that do not reference any other vector</span>
  <onguard-gauge [score]="7" [title]="'Vector Section'" [min]="0" [max]="10"></onguard-gauge>
  <div>
    ${buttonElement.repeat(4)}
  </div>
</onguard-soft-card>`,
});
compactSoftCard.args = {
    padding: 'compact',
};