import React from 'react';
import { storiesOf } from '@storybook/react';
import ServiceLocator from 'App/ServiceLocator';
import AddGalleryImage from './index';
import blueImg from './res/blau.jpg';
import greyIMG from './res/grau.jpg';
import redIMG from './res/rot.jpg';
import blackIMG from './res/blau.jpg';
import stern from './res/Stern.jpg';
import dreieck from './res/Dreieck.jpg';
import rechteck from './res/Rechteck.jpg';
import kreis from './res/Kreis.jpg';

const filters = [
    {
        title: 'Sport',
        checked: false,
    },
    {
        title: 'Symbole',
        checked: true,
    },
    {
        title: 'Saison',
        checked: false,
    },
];

const images = [
    {
        url: blueImg,
        title: 'Sport',
    },
    {
        url: kreis,
        title: 'Symbole',
    },
    {
        url: redIMG,
        title: 'Saison',
    },
    {
        url: stern,
        title: 'Branchen',
    },
    {
        url: greyIMG,
        title: 'Bilder',
    },
    {
        url: blackIMG,
        title: 'Autos',
    },
    {
        url: rechteck,
        title: 'Figuren',
    },
    {
        url: dreieck,
        title: 'Geometrisch',
    },
];

const analyticsSrvc = new (class {
    static serviceName = 'AnalyticsService';
    triggerEvent = () => {};
})();
ServiceLocator.provide(analyticsSrvc);

storiesOf('AddGalleryImage', module)
    .add('shows empty dialog if there are no images to show', () => (
        <AddGalleryImage
            tags={[]}
            onClose={() => {}}
            onSelectImage={() => {}}
            onSelectTag={() => {}}
            images={[]}
            open={true}
        />
    ))
    .add('shows images with filters', () => (
        <AddGalleryImage
            tags={filters}
            images={images}
            onClose={() => {}}
            onSelectImage={() => {}}
            onSelectTag={() => {}}
            open={true}
        />
    ));
