import React from "react";
import { FlatList, ScrollView, View } 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";
import styles from "./styles";
import { useTheme } from "@react-navigation/native";
export function HomeServiceLoader() {
  const { isDark } = useValues();
  const loaders = new Array(4).fill(null);
  const backgroundColor = isDark
    ? appColors.darkPrimary
    : appColors.loaderBackground;
  const foregroundColor = isDark
    ? appColors.solidBorder
    : appColors.loaderLightHighlight;

  const { colors } = useTheme();

  const ShimmerItem = () => {
    return (
      <ContentLoader
        speed={1.5}
        width={"45%"}
        height={windowHeight(108)}
        backgroundColor={backgroundColor}
        foregroundColor={foregroundColor}
        style={{
          backgroundColor: isDark ? appColors.primaryText : appColors.lightGray,
          borderRadius: windowHeight(6),
          padding: windowHeight(15),
          marginBottom: windowHeight(15),
          flex: 1,
          marginHorizontal: windowWidth(8),
        }}
      >
        <Rect
          x="5%"
          y={windowHeight(10)}
          width="50%"
          height="20"
          rx={windowHeight(3)}
          ry={windowHeight(3)}
        />
        <Rect
          x="5%"
          y={windowHeight(35)}
          width="80%"
          height="15"
          rx={windowHeight(3)}
          ry={windowHeight(3)}
        />
        <Rect
          x="5%"
          y={windowHeight(55)}
          width="60%"
          height="15"
          rx={windowHeight(3)}
          ry={windowHeight(3)}
        />
        <Rect
          x="5%"
          y={windowHeight(76)}
          width="30%"
          height="25"
          rx={windowHeight(3)}
          ry={windowHeight(3)}
        />
        <Rect
          x="75%"
          y={windowHeight(76)}
          width="20%"
          height="25"
          rx={windowHeight(3)}
          ry={windowHeight(3)}
        />
      </ContentLoader>
    );
  };

  return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      style={{
        backgroundColor: isDark ? appColors.solidBorder : appColors.lightGray,
      }}
    >
      <View
        style={{ alignItems: "center", width: "100%", top: windowHeight(13) }}
      >
        <ContentLoader
          speed={2}
          width={windowWidth(440)}
          height={windowHeight(155)}
          backgroundColor={
            isDark ? appColors.primaryText : appColors.loaderBackground
          }
          foregroundColor={
            isDark ? appColors.solidBorder : appColors.loaderLightHighlight
          }
        >
          <Rect
            x="0"
            y="0"
            width="100%"
            height={windowHeight(140)}
            rx={windowHeight(8)}
          />
        </ContentLoader>
      </View>
      <View
        style={{
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "center",
          paddingHorizontal: windowWidth(5.9),
          top: windowHeight(15),
          backgroundColor: isDark ? appColors.primaryText : appColors.border,
          width: "90%",
          alignSelf: "center",
          paddingBottom: windowHeight(5),
          borderRadius: windowWidth(5),
          marginBottom: windowHeight(15),
        }}
      >
        {loaders.map((_, index) => (
          <ContentLoader
            key={index}
            speed={2}
            width={"24%"}
            height={90}
            backgroundColor={backgroundColor}
            foregroundColor={foregroundColor}
            style={{ marginHorizontal: windowWidth(2.8) }}
          >
            <Rect
              x={windowHeight(7)}
              y={windowHeight(10)}
              width={windowHeight(50)}
              height={windowHeight(45)}
              rx={windowHeight(4)}
            />
            <Rect
              x={windowHeight(7.5)}
              y={windowHeight(60)}
              rx={windowHeight(2.5)}
              ry={windowHeight(2.5)}
              width={windowHeight(49)}
              height={windowHeight(8)}
            />
          </ContentLoader>
        ))}
      </View>

      <View style={{ marginTop: windowHeight(15) }}>
        <FlatList
          data={[1, 2, 3, 4]}
          numColumns={2}
          keyExtractor={(item, index) => index.toString()}
          renderItem={() => <ShimmerItem />}
          contentContainerStyle={{
            marginTop: windowHeight(15),
            paddingHorizontal: windowWidth(12),
          }}
          columnWrapperStyle={{
            justifyContent: "space-between",
          }}
        />
      </View>
    </ScrollView>
  );
}
