import {
  IotMapConfig,
  IotMapManager,
  IotMapMarkerManager,
  IotMapUserMarkerManager,
  ShapeType
} from 'iotmapmanager/dist';

import './Test.stories.css';
import {
  withKnobs,
  object,
  select,
  number,
  boolean,
  color,
  text
} from '@storybook/addon-knobs';
import { MARKER_LIST } from './Test.stories.const';

export default {
  title: 'Iot Map Manager',
  decorators: [
    withKnobs
  ]
};

let markersList: any;
let userMarker: any;
let clusterList: any;
let iotMapTemplate: string = `<div id="iotMap" style="width: 1280px; height: 720px"></div>`;


const locationParams = (id) => [
  number('longitude', 44.895, {step: 0.001}, 'item ' + id),
  number('latitude', 4.87, {step: 0.001}, 'item ' + id),
];

/*const layerParams ?
  const popupParams ?
  const statusParams ?*/


const shapeParams = (id) => ({
  type: select(
    'Shape type',
    [ShapeType.circle, ShapeType.square],
    0,
    'item ' + id
  ),
  color: color('Shape color', '#FFCC00', 'item ' + id),
  anchored: boolean('With anchor', false, 'item ' + id),
  plain: boolean('Plain shape', false, 'item ' + id),
  accuracy: accuracyParams(id),
  direction: directionParams(id)
});

const innerParams = (id) => ({
  color: color('Inner color', 'green', 'item ' + id),
  label: text('Inner letter', 'J', 'item ' + id),
  icon: text('Inner icon', 'iotmap-icons-temperature', 'item ' + id),
});

const gaugeParams = (id) => ({
  type: select(
    'Shape type',
    [ShapeType.circle],
    0,
    'item ' + id
  ),
  color: color('Shape color', 'red', 'item ' + id),
  anchored: boolean('With anchor', false, 'item ' + id),
  percent: percentParams(id),
});



const percentParams = (id) => [
  number(
    'Gauge value',
    15,
    {
      range: true,
      min: 0,
      max: 100,
      step: 1,
    },
    'item ' + id
  )
];

const accuracyParams = (id) => [
  number('accuracy', 150, {step: 20}, 'item ' + id),
];

const directionParams = (id) =>
  number('direction',
    0,
    {
    range: true,
    min: 0,
    max: 360,
    step: 10,
  }, 'item ' + id)
;

const innerStoryParams = (id) => ({
  id: 's1',
  location: locationParams(id),
  shape: shapeParams(id),
  inner: innerParams(id),
});



///////////////////////////////////////////////////////////////
// CLUSTERS
///////////////////////////////////////////////////////////////

export const Clusters  = () => {
  markersList = object('markersList', MARKER_LIST);
  addEventListener('DOMContentLoaded', init);
  return iotMapTemplate;
};

///////////////////////////////////////////////////////////////
// INNER
///////////////////////////////////////////////////////////////

export const Inner = () => {
  markersList = [innerStoryParams(0)];
  addEventListener('DOMContentLoaded', init);
  return iotMapTemplate;
};
///////////////////////////////////////////////////////////////
// SHAPES
///////////////////////////////////////////////////////////////

export const Shapes = () => {
  markersList = [
    {
      id: 's1',
      location: locationParams(0),
      shape: shapeParams(0),
    },
  ]
  addEventListener('DOMContentLoaded', init);
  return iotMapTemplate;
};

///////////////////////////////////////////////////////////////
// GAUGE
///////////////////////////////////////////////////////////////

export const Gauge = () => {
  markersList = [
    {
      id: 's1',
      location: locationParams(0),
      shape: gaugeParams(0),
    },
  ];
  addEventListener('DOMContentLoaded', init);
  return iotMapTemplate;
};

///////////////////////////////////////////////////////////////
// GAUGE WITH INNER
///////////////////////////////////////////////////////////////

export const GaugeWithInner = () => {
  markersList = [
    {
      id: 's1',
      location: locationParams(0),
      shape: gaugeParams(0),
      inner: innerParams(0),
    },
  ]
  addEventListener('DOMContentLoaded', init);
  return iotMapTemplate;
};

function init() {
  let config = new IotMapConfig()
  let mapManager = new IotMapManager(config);
  let markerManager = new IotMapMarkerManager(mapManager, config)
  mapManager.init('iotMap');
  markerManager.addMarkers(markersList);
  removeEventListener('DOMContentLoaded', init);
}



///////////////////////////////////////////////////////////////
// USER MARKER
///////////////////////////////////////////////////////////////

const userMarkerParams = () => ({
  location: locationParams(0),
  direction: directionParams(0),
  accuracy: accuracyParams(0)

})

export const UserMarker = () => {
  userMarker = userMarkerParams();
  addEventListener('DOMContentLoaded', initUserMarker);
  return iotMapTemplate;
};

function initUserMarker() {
  let config = new IotMapConfig()
  let mapManager = new IotMapManager(config);
  let userMarkerManager = new IotMapUserMarkerManager(mapManager, config)
  mapManager.init('iotMap');
  userMarkerManager.addUserMarker(userMarker);
  removeEventListener('DOMContentLoaded', initUserMarker);
}