import { moduleMetadata } from '@storybook/angular';
import { CabinetComponent } from './cabinet.component';
import { CabinetModule } from './cabinet.module';
import { Board, Cabinet, RawCabinet } from '@creedinteractive/onguard-models';
import { cabinetData } from './rawdata';

export default {
    title: 'Visualizations/Cabinet',
    component: CabinetComponent,
    decorators: [
        moduleMetadata({
            imports: [CabinetModule],
        }),
    ],
};

const Template = (args: CabinetComponent) => ({
    component: CabinetComponent,
    template: `<onguard-cabinet [model]="model"></onguard-cabinet>`,
    props: args,
});

const boards = cabinetData.Boards.map((board) => Board.fromRaw(board));

function findGateway(type: string): RawCabinet {
    return cabinetData.MediaGateways.find((rawCabinet) => rawCabinet.Type === type);
}

export const MCC = Template.bind({});
MCC.args = {
    model: Cabinet.fromRaw(findGateway('mcc'), boards),
};

export const G250 = Template.bind({});
G250.args = {
    model: Cabinet.fromRaw(findGateway('g250'), boards),
};
G250.storyName = 'G250';

export const G350 = Template.bind({});
G350.args = {
    model: Cabinet.fromRaw(findGateway('g350'), boards),
};
G350.storyName = 'G350';

export const G430 = Template.bind({});
G430.args = {
    model: Cabinet.fromRaw(findGateway('g430'), boards),
};
G430.storyName = 'G430';

export const G450 = Template.bind({});
G450.args = {
    model: Cabinet.fromRaw(findGateway('g450'), boards),
};
G450.storyName = 'G450';

export const G650 = Template.bind({});
G650.args = {
    model: Cabinet.fromRaw(findGateway('g650'), boards),
};
G650.storyName = 'G650';

export const G700 = Template.bind({});
G700.args = {
    model: Cabinet.fromRaw(findGateway('g700'), boards),
};
G700.storyName = 'G700';