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

export function CouponLoader() {
  const { isDark } = useValues();
  const backgroundColor = isDark
    ? appColors.darkPrimary
    : appColors.loaderBackground;
  const foregroundColor = isDark
    ? appColors.solidBorder
    : appColors.loaderLightHighlight;

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