import {
  View,
  Text,
  Pressable,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Platform,
  Dimensions,
  StatusBar,
  Image,
  Appearance,
} from "react-native";
import React from "react";
import { connect } from "react-redux";
import Svg, { Path } from "react-native-svg";
import { userFavorite } from "../../../../redux/actions";

//components
import Navbar from "../../../../components/Navbar";
import Empty from "../../../../components/Empty";
import Blur from "../../../../components/Blur";

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

const { height, width } = Dimensions.get("window");
const ios = Platform.OS === "ios";

const ProfileBookmark = ({
  bookmarkList,
  getList,
  deleteItem,
  loading,
  mobile,
  grades,
}) => {
  const colorScheme = Appearance.getColorScheme();

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

  return (
    <SafeAreaView
      style={{
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
        position: "relative",
        backgroundColor: "white",
      }}
    >
      <Navbar
        headerOptions={{
          logo: false,
          menu: false,
          hamburgerMenu: false,
          title: "لیست علاقه‌مندی‌ها",
          bookmark: false,
          qr: false,
          back: true,
        }}
      />
      {loading && (
        <View
          style={[
            tw("absolute left-0 top-0 rounded-md overflow-hidden"),
            {
              width: Dimensions.get("window").width,
              height: height,
              zIndex: 1,
              backgroundColor: Colors.theme1[colorScheme].white + "60",
            },
          ]}
        >
          <Blur />
        </View>
      )}
      {bookmarkList.length ? (
        <ScrollView
          contentContainerStyle={styles.contentContainerStyle}
          style={styles.container}
        >
          <View style={tw("w-full mt-2 px-4")}>
            <View style={tw("p-0 m-0 flex")}>
              {bookmarkList?.map((bookmark, index) => (
                <Bookmark
                  key={index}
                  bookmark={bookmark}
                  deleteItem={deleteItem}
                  mobile={mobile}
                  grades={grades}
                />
              ))}
            </View>
          </View>
        </ScrollView>
      ) : (
        <Empty text="لیست علاقه‌مندی‌ها خالی است." />
      )}
    </SafeAreaView>
  );
};

const Bookmark = ({ bookmark, deleteItem, mobile, grades }) => {
  const colorScheme = Appearance.getColorScheme();

  const isContent = React.useMemo(() => {
    return bookmark?.content;
  });

  return (
    <Pressable
      style={[
        tw("flex flex-row-reverse rounded-md justify-between px-3.5 py-2 mb-4"),
        {
          borderWidth: 1.5,
          borderColor: Colors.theme1[colorScheme].greenCF,
        },
      ]}
    >
      <View style={tw("flex flex-row-reverse items-end")}>
        <Image
          resizeMode="contain"
          source={{
            uri: `https://dnvn.ir/api/v1/file/${
              isContent
                ? bookmark?.content?.fileIds
                : bookmark?.product?.book?.fileIds
            }`,
          }}
          style={{
            width: mobile
              ? isContent
                ? width / 3
                : width / 5
              : isContent
              ? width / 5
              : width / 7,
            height:
              ((mobile
                ? isContent
                  ? width / 7
                  : width / 5
                : isContent
                ? width / 9
                : width / 7) *
                4) /
              2.7,
          }}
        />
        <View style={tw(`flex mr-2 ${ios ? "items-end" : ""}`)}>
          <Text
            style={{
              fontFamily: "bold",
              fontSize: fontSize.tiny,
              color: Colors.theme1[colorScheme].gray20,
              width: width / 3,
            }}
          >
            {isContent ? bookmark?.content?.name : bookmark.product.book.name}
          </Text>
          {!isContent && (
            <Text
              style={{
                marginTop: 5,
                fontFamily: "regular",
                fontSize: fontSize.base,
                color: Colors.theme1[colorScheme].gray20,
              }}
            >
              {"پایه" + " " + grades[bookmark?.product?.book?.gradeId]}
            </Text>
          )}
        </View>
      </View>
      <Pressable onPress={() => deleteItem({ id: bookmark.id })}>
        <Svg
          data-name="vuesax/linear/archive-add"
          xmlns="http://www.w3.org/2000/svg"
          width={29.778}
          height={29.778}
        >
          <Path
            d="M20.869 2.482H8.908a4.8 4.8 0 0 0-4.789 4.789v17.483c0 2.233 1.6 3.176 3.561 2.1l6.055-3.362a2.628 2.628 0 0 1 2.32 0l6.055 3.362c1.96 1.092 3.561.149 3.561-2.1V7.271a4.819 4.819 0 0 0-4.802-4.789Z"
            fill="#37a865"
          />
          <Path
            data-name="Vector"
            d="M17.987 13.214h-6.2"
            fill="none"
            stroke="#fff"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
          />
        </Svg>
      </Pressable>
    </Pressable>
  );
};

const mapStateToProps = (state) => ({
  loading: state.userFactor.loading,
  mobile: state.publicApi.mobile,
  bookmarkList: state.userFavorite.list,
  loading: state.userFavorite.loading,
  grades: state.publicApi.grades,
});

const mapDispatchToProps = {
  getList: userFavorite.list,
  deleteItem: userFavorite.del,
};

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

const styles = StyleSheet.create({
  contentContainerStyle: {
    paddingBottom: 100,
    position: "relative",
  },
  container: {
    backgroundColor: "white",
    flexDirection: "column",
    paddingVertical: 0,
    paddingHorizontal: 0,
  },
});