import * as React from "react";
import { useCallback } from "react";
import { View, FlatList, StyleSheet } from "react-native";

import { Loading } from "../loading";
import { PlaylistItem } from "./playlist";
import { VideoPreview } from "../video/video-preview";
import { ContentText } from "../content-text";
import { Video } from "../landing/landing";
import { useFirebase } from "../../hooks/use-firebase/useFirebase";

const style = StyleSheet.create({
  container: {
    marginRight: 10,
    marginBottom: 10,
    paddingBottom: 10,
    borderBottomColor: "rgba(128,128,128,0.4)",
    borderBottomWidth: 1,
  },
  title: { fontWeight: "bold", fontSize: 16 },
  video: { width: 150, marginRight: 20 },
});

export interface PlaylistProps {
  id: string;
}

export const Playlist = ({ id }: PlaylistProps) => {
  const { loading, data } = useFirebase<PlaylistItem>(`/objects/${id}`);

  const keyExtractor = useCallback((item: Video) => item._id, [id]);
  const renderItem = useCallback(
    ({ item }: { item: Video }) => {
      return (
        <View key={item._id} style={style.video}>
          <VideoPreview detailsPosition="bottom" id={item._id} />
        </View>
      );
    },
    [id]
  );
  return loading || !data ? (
    <Loading />
  ) : (
    <View style={style.container}>
      <ContentText style={style.title}>{data.data.name}</ContentText>
      <FlatList
        horizontal
        data={data.data.videos}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
      />
    </View>
  );
};