import React from 'react';
import {FlatList, ScrollView} from 'react-native';
import ClipElementLocal from './ClipElementLocal';
import ClipElementRemote from './ClipElementRemote';
import { nanoid } from '@reduxjs/toolkit';

export default class ClipList extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
  }

  render(): JSX.Element {
    if (this.props.type === 'local') {
      return <FlatList
          data={this.props.clips}
          renderItem={({item}) => <ClipElementLocal content={item.content} />}
          keyExtractor={item => nanoid()}
          inverted={true}
        />
    } else {
      return <FlatList
          data={this.props.clips}
          renderItem={({item}) => <ClipElementRemote content={item.content} deviceName={item.device_name} timestamp={item.timestamp}/>}
          keyExtractor={item => nanoid()}
          inverted={true}
        />
      ;
    }
    
  }
}