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 HomeLoader() {
  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.whiteColor,
          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={{
          backgroundColor: isDark ? appColors.bgDark : appColors.whiteColor,
          padding: windowHeight(10),
          margin: windowHeight(10),
          borderRadius: windowHeight(5),
          top: windowHeight(13),
          width: "90%",
          alignSelf: "center",
          height: windowHeight(175),
          paddingTop: windowHeight(5),
        }}
      >
        {" "}
        <View
          style={{
            marginTop: windowHeight(15),
            marginHorizontal: windowWidth(14),
          }}
        >
          <ContentLoader
            speed={2}
            width={"107%"}
            height={windowHeight(90)}
            backgroundColor={backgroundColor}
            foregroundColor={foregroundColor}
          >
            <Circle
              cx={windowWidth(1)}
              cy={windowHeight(25)}
              r={windowHeight(20)}
              x={windowHeight(20)}
              y={windowHeight(0)}
            />
            <Rect
              x={windowHeight(55)}
              y={windowHeight(5)}
              width={windowWidth(280)}
              height={windowHeight(20)}
              rx={windowHeight(2)}
              ry={windowHeight(2)}
            />
            <Rect
              x={windowHeight(55)}
              y={windowHeight(35)}
              width={windowWidth(180)}
              height={windowHeight(10)}
              rx={windowHeight(2)}
              ry={windowHeight(2)}
            />
          </ContentLoader>
        </View>
        <View
          style={{
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            top: windowHeight(-30),
          }}
        >
          {loaders.map((_, index) => (
            <ContentLoader
              key={index}
              speed={2}
              width={"24%"}
              height={90}
              backgroundColor={backgroundColor}
              foregroundColor={foregroundColor}
              style={{ marginHorizontal: windowWidth(1) }}
            >
              <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>

      <View
        style={{ alignItems: "center", width: "100%", top: windowHeight(13) }}
      >
        <ContentLoader
          speed={2}
          width={windowWidth(440)}
          height={windowHeight(155)}
          backgroundColor={
            isDark ? appColors.bgDark : appColors.loaderBackground
          }
          foregroundColor={
            isDark ? appColors.darkPrimary : appColors.loaderLightHighlight
          }
        >
          <Rect
            x="0"
            y="0"
            width="100%"
            height={windowHeight(140)}
            rx={windowHeight(8)}
          />
        </ContentLoader>
      </View>

      <View style={styles.container}>
        <View
          style={[
            styles.rideInfoContainer,
            {
              backgroundColor: isDark
                ? appColors.primaryText
                : appColors.whiteColor,
              borderColor: colors.border,
            },
          ]}
        >
          <ContentLoader
            speed={2}
            width={windowWidth(800)}
            height={windowHeight(500)}
            backgroundColor={
              isDark ? appColors.darkPrimary : appColors.loaderBackground
            }
            foregroundColor={
              isDark ? appColors.solidBorder : appColors.loaderLightHighlight
            }
            style={{ paddingHorizontal: windowWidth(25) }}
          >
            <Rect
              x={windowWidth(5)}
              y={windowHeight(5)}
              width={windowWidth(75)}
              height={windowHeight(50)}
            />
            <Rect
              x={windowWidth(105)}
              y={windowHeight(10)}
              width={windowWidth(140)}
              height={windowHeight(17)}
              rx={0}
            />
            <Rect
              x={windowWidth(240)}
              y={windowHeight(10)}
              width={windowWidth(55)}
              height={windowHeight(17)}
            />
            <Rect
              x={windowWidth(355)}
              y={windowHeight(10)}
              width={windowWidth(55)}
              height={windowHeight(17)}
            />
            <Rect
              x={windowWidth(105)}
              y={windowHeight(38)}
              width={windowWidth(310)}
              height={windowHeight(17)}
              rx={0}
            />

            <Rect
              x={windowWidth(0)}
              y={windowHeight(70)}
              width={windowWidth(420)}
              height={windowHeight(5)}
              rx={0}
            />
            <Circle
              cx={windowWidth(50)}
              cy={windowHeight(113)}
              r={windowWidth(40)}
            />
            <Rect
              x={windowWidth(105)}
              y={windowHeight(95)}
              width={windowWidth(200)}
              height={windowHeight(17)}
              rx={0}
            />
            <Rect
              x={windowWidth(345)}
              y={windowHeight(95)}
              width={windowWidth(65)}
              height={windowHeight(17)}
            />
            <Rect
              x={windowWidth(105)}
              y={windowHeight(118)}
              width={windowWidth(200)}
              height={windowHeight(17)}
              rx={0}
            />
            <Rect
              x={windowWidth(5)}
              y={windowHeight(148)}
              width={windowWidth(320)}
              height={windowHeight(20)}
              rx={0}
            />
            <Circle
              cx={windowWidth(378)}
              cy={windowHeight(158)}
              r={windowWidth(30)}
            />

            <Rect
              x={windowWidth(0)}
              y={windowHeight(190)}
              width={windowWidth(420)}
              height={windowHeight(5)}
              rx={0}
            />

            <Rect
              x={windowWidth(85)}
              y={windowHeight(220)}
              width={windowWidth(320)}
              height={windowHeight(20)}
              rx={0}
            />
            <Circle
              cx={windowWidth(45)}
              cy={windowHeight(230)}
              r={windowWidth(30)}
            />

            <Rect
              x={windowWidth(85)}
              y={windowHeight(270)}
              width={windowWidth(320)}
              height={windowHeight(20)}
              rx={0}
            />
            <Circle
              cx={windowWidth(45)}
              cy={windowHeight(280)}
              r={windowWidth(30)}
            />
          </ContentLoader>
        </View>
      </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>
  );
}
