import React, { useState, useEffect, useCallback } from "react";
import {
  View,
  Text,
  ScrollView,
  Dimensions,
  StyleSheet,
  Pressable,
  SafeAreaView,
  StatusBar,
  LayoutAnimation,
  KeyboardAvoidingView,
  Appearance,
} from "react-native";
import { connect } from "react-redux";
import { userProduct, userFactor } from "../../redux/actions";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
import separate from "../../utils/separate";

//components
import Product from "./components/Product";
import Code from "./components/Code";
import CustomPressable from "../../components/Pressable";
import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
import Empty from "../../components/Empty";

//style
import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors";
import tw from "tailwind-rn";

const { height } = Dimensions.get("window");

const PriceStatus = ({ name, value, type, theme }) => {
  return (
    <View style={tw("w-full flex flex-row-reverse justify-between py-2")}>
      <Text
        style={[
          tw(""),
          {
            fontSize: fontSize.tiny,
            color:
              theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
            fontFamily: "bold",
          },
        ]}
      >
        {name}
      </Text>
      <View style={tw("flex flex-row-reverse items-center")}>
        <Text
          style={[
            {
              color:
                type === "error"
                  ? Colors.theme1.redFF1
                  : theme === "light"
                  ? Colors.theme1.green79
                  : Colors.theme1.white,
              fontSize: fontSize.xl,
              fontFamily: "bold",
            },
          ]}
        >
          {value}
        </Text>
        <Text
          style={[
            {
              color:
                type === "error"
                  ? Colors.theme1.redFF1
                  : theme === "light"
                  ? Colors.theme1.green79
                  : Colors.theme1.white,
              fontSize: fontSize.sm,
              fontFamily: "regular",
              marginRight: 4,
            },
          ]}
        >
          تومان
        </Text>
      </View>
    </View>
  );
};

function ShoppingCart({
  userId,
  list,
  factorInfo,
  getList,
  getFactorInfo,
  loading,
  payFactor,
  theme,
}) {
  const navigation = useNavigation();
  const [position, setPosition] = useState("100%");

  const isEmpty = React.useMemo(() => {
    return list?.filter((product) => product?.condition < 2)?.length === 0;
  }, [list]);

  const hasPhysical = React.useMemo(() => {
    return (
      list?.filter(
        (product) => product?.condition < 2 && product?.productType === 2
      )?.length !== 0
    );
  }, [list]);

  useEffect(() => {
    getFactorInfo({ userId });
  }, [list]);

  useEffect(() => {
    getList();
    getFactorInfo({ userId });
  }, []);

  const setBoxPosition = useCallback(() => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setPosition(position === "100%" ? "0%" : "100%");
  }, [userId]);

  return (
    <SafeAreaView
      style={{
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
        position: "relative",
        flex: 1,
      }}
    >
      <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
        <Navbar
          setBoxPosition={setBoxPosition}
          headerOptions={{
            logo: false,
            menu: false,
            hamburgerMenu: false,
            title: "سبد خرید",
            bookmark: false,
            qr: false,
            back: false,
          }}
        />
        <Drawer setBoxPosition={setBoxPosition} position={position} />
        {list?.filter((product) => product?.condition < 2)?.length ? (
          <ScrollView
            contentContainerStyle={styles.contentContainerStyle}
            style={styles.container}
          >
            {list
              ?.sort((a, b) => a?.id - b?.id)
              ?.map((product, index) =>
                product?.condition < 2 ? (
                  <Product key={index} product={product} loading={loading} />
                ) : null
              )}
            <Code />
            <View
              style={tw(
                `flex  w-full border-t py-2 border-gray-300 border-b mt-6 ${
                  theme === "light" ? "" : "border-opacity-20"
                }`
              )}
            >
              <PriceStatus
                name="مبلغ سبد خرید"
                value={
                  isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))
                }
                type="normal"
                theme={theme}
              />

              <PriceStatus
                name="میزان تخفیف"
                value={
                  isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))
                }
                type="error"
                theme={theme}
              />
              
            </View>
            <View
              style={tw(
                "flex flex-row-reverse justify-between items-center w-full py-3"
              )}
            >
              <Text
                style={[
                  {
                    color:
                      theme === "light"
                        ? Colors.theme1.green79
                        : Colors.theme1.white,
                    fontSize: fontSize.base,
                    fontFamily: "bold",
                  },
                ]}
              >
                جمع کل سبد خرید
              </Text>
              <View style={tw("flex flex-row-reverse items-center")}>
                <Text
                  style={[
                    {
                      color:
                        theme === "light"
                          ? Colors.theme1.green79
                          : Colors.theme1.white,
                      fontSize: fontSize.xl,
                      fontFamily: "bold",
                    },
                  ]}
                >
                  {isEmpty ? 0 : separate(factorInfo?.payPrice - factorInfo?.transportPrice)}
                </Text>
                <Text
                  style={[
                    {
                      color:
                        theme === "light"
                          ? Colors.theme1.green79
                          : Colors.theme1.white,
                      fontSize: fontSize.sm,
                      fontFamily: "regular",
                      marginRight: 4,
                    },
                  ]}
                >
                  تومان
                </Text>
              </View>
            </View>
            <View style={tw("w-full")}>
              <Pressable
                style={[
                  tw(
                    "w-full rounded-md flex flex-row justify-center items-center py-3 px-3 my-5"
                  ),
                  {
                    backgroundColor:
                      theme === "light"
                        ? Colors.theme1.greenC8 + "1a"
                        : Colors.theme1.blue90 + "33",
                  },
                ]}
              >
                <Text
                  style={[
                    tw("mr-1"),
                    {
                      color:
                        theme === "light"
                          ? Colors.theme1.green79
                          : Colors.theme1.white,
                      fontSize: fontSize.sm,
                      fontFamily: "regular",
                    },
                  ]}
                >
                  هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود
                </Text>
                <Ionicons
                  name="alert-circle-outline"
                  size={20}
                  color={
                    theme === "light"
                      ? Colors.theme1.greenC8
                      : Colors.theme1.white
                  }
                />
              </Pressable>

              <CustomPressable
                title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"}
                backgroundColor={Colors.theme1.greenCF}
                color={"white"}
                border={{ color: "#196EC0", width: 0 }}
                width={"100%"}
                onPress={() =>
                  isEmpty
                    ? asyncAwesomeAlert("خطا", "سبد خرید شما خالی است.", {
                        showCancelButton: false,
                      })
                    : hasPhysical
                    ? navigation.navigate("DeliveryForm")
                    : payFactor({ userId })
                }
              />
            </View>
          </ScrollView>
        ) : (
          <Empty
            text={"سبد خرید شما خالی است"}
            buttonText={"فروشگاه"}
            buttonAction={() => navigation.navigate("Products")}
          />
        )}
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const mapStateToProps = (state) => ({
  list: state.userProduct.list,
  payPrice: state.userProduct.sum,
  factorInfo: state.userFactor.info,
  userId: state.user.status?.id,
  hasPhysical: state.userProduct.hasPhysical,
  loading: state.userProduct.loading,
  theme: state.publicApi.theme,
});

const mapDispatchToProps = {
  getList: userProduct.list,
  getInfo: userProduct.info,
  getFactorInfo: userFactor.info,
  payFactor: userFactor.payment,
};

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart);

const styles = StyleSheet.create({
  contentContainerStyle: {
    paddingBottom: 120,
    position: "relative",
  },
  container: {
    flexDirection: "column",
    paddingVertical: 5,
    paddingHorizontal: 16,
  },
});