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

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

  const LoaderItem = () => (
    <ContentLoader
      speed={1.5}
      width={windowWidth(450)}
      height={windowHeight(138)}
      backgroundColor={
        isDark ? appColors.darkPrimary : appColors.loaderBackground
      }
      foregroundColor={
        isDark ? appColors.solidBorder : appColors.loaderLightHighlight
      }
    >
      <Rect
        x={windowWidth(4)}
        y={windowHeight(9)}
        width="25%"
        height={windowHeight(13.5)}
        rx={0}
      />
      <Rect
        x={windowWidth(320)}
        y={windowHeight(9)}
        width="18%"
        height={windowHeight(13.5)}
        rx={0}
      />
      <Rect
        x={windowWidth(4)}
        y={windowHeight(28)}
        width="36%"
        height={windowHeight(13.5)}
        rx={0}
      />
      <Rect
        x={windowWidth(4)}
        y={windowHeight(60)}
        width="88%"
        height={windowHeight(13.5)}
        rx={0}
      />
      <Rect
        x={windowWidth(4)}
        y={windowHeight(80)}
        width="36%"
        height={windowHeight(13.5)}
        rx={0}
      />
      <Rect
        x={windowWidth(4)}
        y={windowHeight(120)}
        width="45%"
        height={windowHeight(13.5)}
        rx={0}
      />
      <Rect
        x={windowWidth(227)}
        y={windowHeight(120)}
        width="25%"
        height={windowHeight(13.5)}
        rx={0}
      />
    </ContentLoader>
  );

  return (
    <>
      <View
        style={[
          styles.container,
          {
            backgroundColor: isDark
              ? appColors.primaryText
              : appColors.loaderBackground,
            borderColor: isDark ? appColors.darkBorder : appColors.lightGray,
          },
        ]}
      >
        <LoaderItem />
      </View>
      <View
        style={[
          styles.container,
          {
            backgroundColor: isDark
              ? appColors.primaryText
              : appColors.loaderBackground,
            borderColor: isDark ? appColors.darkBorder : appColors.lightGray,
          },
        ]}
      >
        <LoaderItem />
      </View>
      <View
        style={[
          styles.container,
          {
            backgroundColor: isDark
              ? appColors.primaryText
              : appColors.loaderBackground,
            borderColor: isDark ? appColors.darkBorder : appColors.lightGray,
          },
        ]}
      >
        <LoaderItem />
      </View>
    </>
  );
}
