import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { select, withKnobs } from '@kadira/storybook-addon-knobs';
import CatalogItemDetails from './CatalogItemDetails.jsx';
import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js';
import { FinalizedLicenseModelFactory } from 'test-utils/factories/licenseModel/LicenseModelFactories.js';
import { versionStatus } from 'sdc-app/common/helpers/ItemsHelperConstants.js';

const stories = storiesOf('CatalogTiles', module);
stories.addDecorator(withKnobs);

const types = [
    catalogItemTypes.LICENSE_MODEL,
    catalogItemTypes.SOFTWARE_PRODUCT
];

function selectType() {
    return select('Item type', types, types[0]);
}

let vlm = {
    ...FinalizedLicenseModelFactory.build({ name: 'Test-VLM' }),
    itemStatus: versionStatus.DRAFT
};
let certifiedVlm = { ...vlm, itemStatus: versionStatus.CERTIFIED };

stories.add('preview', () => (
    <div className="catalog-view">
        <div className="catalog-list">
            <div className="catalog-items">
                <CatalogItemDetails
                    catalogItemData={vlm}
                    catalogItemTypeClass={selectType()}
                    onSelect={action('onSelect')}
                    onMigrate={action('onMigrate')}
                />
                <CatalogItemDetails
                    catalogItemData={certifiedVlm}
                    catalogItemTypeClass={selectType()}
                    onSelect={action('onSelect')}
                    onMigrate={action('onMigrate')}
                />
            </div>
        </div>
    </div>
));