import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import Boundingbox from '../index';

storiesOf('Boundingbox', module)
  .add('default view', () => {
    const params = {
      image: 'http://i.imgur.com/gF7QYwa.jpg',
      boxes: [
        // coord(0,0) = top left corner of image
        // [x, y, width, height]
        [0, 0, 250, 250],
        [300, 0, 250, 250],
        [700, 0, 300, 25],
        [1100, 0, 25, 300],
      ],
    };
    return (<Boundingbox
      image={params.image}
      boxes={params.boxes}
    />);
  })
  .add('box selection', () => {
    const params = {
      image: 'http://i.imgur.com/gF7QYwa.jpg',
      boxes: [
        // coord(0,0) = top left corner of image
        // [x, y, width, height]
        [0, 0, 250, 250],
        [300, 0, 250, 250],
        [700, 0, 300, 25],
        [1100, 0, 25, 300],
      ],
    };
    return (<Boundingbox
      image={params.image}
      boxes={params.boxes}
      onSelected={action('selected')}
    />);
  })
  .add('label display', () => {
    const params = {
      image: 'http://i.imgur.com/gF7QYwa.jpg',
      boxes: [
        // coord(0,0) = top left corner of image
        // [x, y, width, height]
        { coord: [0, 0, 250, 250], label: 'test' },
        { coord: [300, 0, 250, 250], label: 'A' },
        { coord: [700, 0, 300, 25], label: 'B' },
        { coord: [1100, 0, 25, 300], label: 'C' },
      ],
    };
    return (<Boundingbox
      image={params.image}
      boxes={params.boxes}
    />);
  })
  .add('pixel segmentation', () => {
    var json = require('../../public/ADE_val_00000761.json')
    return (<Boundingbox
      image={'./ADE_val_00000761.jpg'}
      pixelSegmentation={json.body.predictions[0].vals}
    />);
  })
  .add('pixel segmentation from json url', () => {
    return (<Boundingbox
      image={'./ADE_val_00000761.jpg'}
      segmentationJson={'./ADE_val_00000761.json'}
    />);
  });

@@ -1925,18 +1925,215 @@
 '%7D%0A    /%3E);%0A
+  %7D)%0A  .add('pixel segmentation on remote image', () =%3E %7B%0A    return (%3CBoundingbox%0A      image=%7B'http://localhost/ADE_val_00000761.jpg'%7D%0A      segmentationJson=%7B'./ADE_val_00000761.json'%7D%0A    /%3E);%0A
   %7D);%0A

add stories on buggy remote img