import React from "react";
import { View, FlatList } from "react-native";
import ContentLoader, { Circle, Rect } from "react-content-loader/native";
import { appColors, windowHeight, windowWidth } from "@src/themes";
import { useValues } from "@src/utils/context/index";

export function SkeltonAppPage() {
  const { isDark } = useValues();

  const renderItem = () => (
    <View style={{ marginBottom: windowHeight(12) }}>
      <ContentLoader
        speed={1.5}
        width="100%"
        height={windowHeight(40)}
        backgroundColor={
          isDark ? appColors.darkPrimary : appColors.loaderBackground
        }
        foregroundColor={
          isDark ? appColors.solidBorder : appColors.loaderLightHighlight
        }
      >
        <Circle
          cx={windowHeight(20)}
          cy={windowHeight(22)}
          r={windowHeight(18)}
        />

        <Rect
          x={windowHeight(50)}
          y={windowHeight(12)}
          width={windowWidth(150)}
          height={windowHeight(17)}
        />

        <Rect
          x={windowHeight(50)}
          y={windowHeight(20)}
          width={windowWidth(150)}
          height={windowHeight(17)}
        />

        <Rect
          x={windowHeight(200)}
          y={windowHeight(20)}
          width={windowWidth(90)}
          height={windowHeight(14)}
        />
      </ContentLoader>
    </View>
  );

  return (
    <View
      style={{
        paddingVertical: windowHeight(15),
        width: "90%",
        backgroundColor: isDark ? appColors.primaryText : appColors.whiteColor,
        alignSelf: "center",
        marginTop: windowHeight(15),
        paddingHorizontal: windowHeight(11),
        borderRadius: windowHeight(15),
        marginBottom: windowHeight(25),
      }}
    >
      <FlatList
        data={[1, 2, 3, 4, 5, 6, 7]}
        keyExtractor={(_, index) => String(index)}
        renderItem={renderItem}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
}
