import { useCallback } from "react";

import ContentLoader, { Circle, Rect } from "react-content-loader/native";
import { FlatList } from "react-native";
import { YStack } from "tamagui";

import { SourceList } from "@/ui/components/content/source/SourceList";

const data: number[] = new Array(5).fill(0);

type SourceSkeletonListProps = {
  horizontal?: boolean;
};

const VerticalSkeleton = (props: any) => (
  <ContentLoader
    animate={true}
    backgroundColor="#D4D5D8"
    foregroundColor="white"
    height={70}
    speed={1.5}
    width="100%"
    {...props}
  >
    <Circle cx="25" cy="30" r="25" />
    <Rect height="10" rx="4" ry="4" width="25%" x="70" y="10" />
    <Rect height="10" rx="4" ry="4" width="45%" x="70" y="40" />
    <Rect height="30" rx="4" ry="4" width="20%" x="280" y="15" />
  </ContentLoader>
);

const HorizontalSkeleton = (props: any) => (
  <ContentLoader
    animate={true}
    backgroundColor="#D4D5D8"
    foregroundColor="white"
    height={180}
    speed={1.5}
    width={110}
    {...props}
  >
    <Circle cx="60" cy="40" r="33" />
    <Rect height="10" rx="4" ry="4" width="100" x="10" y="85" />
    <Rect height="25" rx="8" ry="8" width="70" x="25" y="105" />
  </ContentLoader>
);

const keyExtractor = (_: number, index: number) => index.toString();

const selectSkeletonComponent = (horizontal: boolean) => {
  return horizontal ? (
    <HorizontalSkeleton />
  ) : (
    <YStack width="100%">
      <VerticalSkeleton />
    </YStack>
  );
};

export const SourceSkeletonList = (props: SourceSkeletonListProps) => {
  const { horizontal = false } = props;

  const ItemSeparator = horizontal ? SourceList.HorizontalSeparator : SourceList.VerticalSeparator;

  const renderItem = useCallback(() => {
    return selectSkeletonComponent(horizontal);
  }, [horizontal]);

  return (
    <FlatList
      contentContainerStyle={{ paddingBottom: 0 }}
      data={data}
      horizontal={horizontal}
      ItemSeparatorComponent={ItemSeparator}
      keyExtractor={keyExtractor}
      removeClippedSubviews={true}
      renderItem={renderItem}
      scrollEnabled={false}
      showsHorizontalScrollIndicator={false}
    />
  );
};
