import * as React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'react-redux';

import { getFavorites } from './favorites.actions';
import { Stream } from '../common/stream/stream.component';

export class Favorites extends React.Component<any, any> {
  public componentDidMount() {
    this.props.getFavorites();
  }

  public render() {
    return (
      <section className='page-wrapper favorites'>
        <div className='stream-list'>
          {
            this.props.streams.map(
              (stream) =>
                <Stream
                  cls='charts-stream'
                  data={stream}
                  key={stream.key} />
                  // queue={(s) => this.props.addToQueue(s)}
                  // play={(s) => this.props.loadStream(s)}
                  // navigate={(link: string) => this.props.navigate(link)} />
            )
          }
        </div>
      </section>
    );
  }
}

const mapState = (state: any) => {
    const { user, router, favorites } = state;
    return {
      user,
      streams: favorites.streams
    };
};

const mapDispatch = (dispatch: Dispatch<any>) => ({
    getFavorites: () => dispatch(getFavorites())
});

export default connect(mapState, mapDispatch)(Favorites);
