import React, { useState } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import FastImage from "react-native-fast-image";
import { styles } from "../style";
import { appColors, windowHeight } from "@src/themes";
import { ArrowService } from "@utils/icons";
import { useValues } from "@src/utils/context/index";

import Images from "@src/utils/images";

export function CategoryItem({ item, onPress }: any) {
  const { viewRTLStyle, textRTLStyle, isDark, isRTL } = useValues();
  const [isLoading, setIsLoading] = useState(true);

  return (
    <View
      style={[
        styles.mainContainer,
        {
          backgroundColor: isDark
            ? appColors.primaryText
            : appColors.whiteColor,
          borderColor: isDark ? appColors.darkBorder : appColors.go,
        },
      ]}
    >
      <TouchableOpacity
        onPress={onPress}
        style={[styles.imageView]}
        activeOpacity={0.7}
      >
        {isLoading && (
          <FastImage
            resizeMode="stretch"
            style={[
              styles.imgBg,
              {
                backgroundColor: isDark
                  ? appColors.darkHeader
                  : appColors.loaderBackground,
              },
            ]}
            source={Images.imagePlaceholder}
          />
        )}

        <View style={[styles.mainView, { flexDirection: viewRTLStyle }]}>
          <Text
            style={[
              styles.name,
              {
                textAlign: isRTL ? "right" : "left",
                color: isDark ? appColors.whiteColor : appColors.blackColor,
              },
            ]}
          >
            {item?.name}
          </Text>
          {item.id != 10 && (
            <View
              style={[
                styles.roundedShadowContainer,
                {
                  backgroundColor: isDark
                    ? appColors.primaryText
                    : appColors.whiteColor,
                },
              ]}
            >
              <ArrowService />
            </View>
          )}
        </View>
        <Text style={[styles.text, { textAlign: textRTLStyle }]}>
          {item?.description}
        </Text>
        <View
          style={[
            styles.borderLine,
            {
              borderBottomColor: isDark
                ? appColors.darkBorder
                : appColors.loaderPrimary,
            },
          ]}
        />
        <FastImage
          resizeMode="stretch"
          style={[
            styles.imgBg,
            isLoading ? { position: "absolute", opacity: 0 } : { opacity: 1 },
            { borderBottomRightRadius: windowHeight(15), borderBottomLeftRadius: windowHeight(15) }
          ]}
          source={
            item?.service_image_url
              ? { uri: item?.service_image_url }
              : Images.imagePlaceholder
          }
          onLoadStart={() => setIsLoading(true)}
          onLoadEnd={() => setIsLoading(false)}
        />
      </TouchableOpacity>
    </View>
  );
}
