import React from 'react';
import ReactDOM from 'react-dom';
import { Song, Sequencer, Sampler, Synth } from '../src';

ReactDOM.render(
  <Song tempo={100}>

    {/* this sample will loop every 2 bars (32 steps) */}
    <Sequencer resolution={16} bars={2}>
      <Sampler
        sample="samples/snare.wav"
        steps={[4, 12, 20, 28]}
      />
    </Sequencer>

    {/* this one lasts 4 bars (64 steps) */}
    <Sequencer bars={4}>
      <Sampler
        sample="samples/kick.wav"
        steps={[
          0, 8, 16, 23.25, 24, 26,
          32, 40, 48, 56, 58
        ]}
      />
    </Sequencer>

    <Sequencer bars={1}>
      <Sampler
        sample="samples/hihat.wav"
        steps={[0, 2, 4, 6, 8, 10, 12, 14]}
      />
    </Sequencer>


    <Sequencer resolution={16} bars={2}>
      <Synth
        type="sawtooth"
        volume={15}
        envelope={{
          attack: 0.01,
          sustain: 0.2,
          decay: 0,
          release: 0.1,
        }}
        steps={[
          [0, .75, 'd#2'],
          [1, 1, 'd#2'],
          [3, .75, 'd#2'],
          [4, 1, 'f#3'],
          [6, 1, 'f3'],

          [8, 1, 'a#2'],
          [11, .75, 'a#2'],
          [12, 1, 'c#3'],
          [14, 1, 'f3'],

          [16, 1, 'a#2'],
          [19, .75, 'a#2'],
          [20, 1, 'c#3'],
          [22, 1, 'f3'],

          [24, 1, 'f#3'],
          [26, .75, 'f#3'],
          [28, 1, 'f#3'],

          [26, 4, 'd#1'],
        ]}
      />
    </Sequencer>
  </Song>,
  document.getElementById('root')
);