import {
  View,
  Text,
  Pressable,
  TouchableOpacity,
  Appearance,
  ActivityIndicator,
} from "react-native";
import React, { useEffect, useCallback } from "react";
import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import { transport } from "../../../redux/actions";
import separate from "../../../utils/separate";

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

const TransportMethod = ({
  list,
  getList,
  setTransport,
  factorInfo,
  userId,
  loading,
}) => {
  const colorScheme = Appearance.getColorScheme();

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

  const Method = useCallback(
    ({ method, active }) => {
      return (
        <Pressable
          style={[
            tw(`flex flex-col items-center w-full px-2 py-1.5 rounded-md mt-3`),
            {
              backgroundColor: active
                ? Colors.theme1[colorScheme].greenCF + "15"
                : Colors.theme1[colorScheme].grayE3 + "44",
              borderWidth: 2,
              borderColor: active
                ? Colors.theme1[colorScheme].greenCF
                : Colors.theme1[colorScheme].grayE3,
            },
          ]}
          onPress={() =>
            !active
              ? setTransport(
                  { factorId: factorInfo?.id, transportId: method?.id },
                  { userId },
                  {}
                )
              : {}
          }
        >
          {loading && !active ? (
            <ActivityIndicator
              size="small"
              color={
                factorInfo?.transportId === method?.id
                  ? Colors.theme1[colorScheme].greenC8
                  : Colors.theme1[colorScheme].gray20
              }
            />
          ) : (
            <Text
              style={{
                fontFamily: "bold",
                fontSize: fontSize.lg,
                color: active
                  ? Colors.theme1[colorScheme].gray20
                  : Colors.theme1[colorScheme].gray20,
              }}
            >
              {method.name}
            </Text>
          )}
          <Text
            style={{
              fontFamily: "bold",
              fontSize: fontSize.sm,
              color: active
                ? Colors.theme1[colorScheme].green20
                : Colors.theme1[colorScheme].gray20,
            }}
          >
            هزینه ارسال {separate(method.price)}
          </Text>
        </Pressable>
      );
    },
    [factorInfo, loading]
  );
  return (
    <View style={tw("mt-0 w-full")}>
      <Text
        style={{
          fontSize: fontSize.lg,
          fontFamily: "bold",
          color: Colors.theme1[colorScheme].green79,
        }}
      >
        لطفا یک روش ارسال انتخاب کنید
      </Text>
      <View style={tw("p-0 m-0 flex flex-col w-full")}>
        {list?.map((method, index) => (
          <Method
            method={method}
            key={index}
            active={factorInfo?.transportId === method?.id}
          />
        ))}
      </View>
    </View>
  );
};

const mapStateToProps = (state) => ({
  list: state.transport.list,
  factorInfo: state.userFactor.info,
  userId: state.user.status?.id,
  loading: state.userFactor.loading,
});

const mapDispatchToProps = {
  getList: transport.list,
  setTransport: transport.set,
};

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