const SatellitesFrame = Kapsule({

  props: {
    time: {},
    satellites: { default: [] }
  },

  init(domNode, state) {
    const width = window.innerWidth;
    const height = window.innerHeight;

    const svg = d3.select(domNode).append('svg')
      .attr('width', width)
      .attr('height', height);

    const canvas = svg.append('g');

    const projection = d3.geoMercator()
      .scale(width / (2 * Math.PI))
      .translate([width / 2, height / 2 + 100]);

    Earth(projection)(canvas.append('g'));

    state.night = Night(projection)(canvas.append('g'));

    state.satellitesLayer = Satellites(projection)
      (canvas.append('g'));

    d3.zoom()
      .on('zoom', () => canvas.attr('transform', d3.event.transform))
      (svg);
  },

  update(state) {
    state.night.time(state.time);
    state.satellitesLayer.satellites(state.satellites);
  }

});