import React from "react";
import { View, Text, Dimensions, Image } from "react-native";
import { connect } from "react-redux";
//style
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";

const width = Dimensions.get("window").width;

function Book({ book, mobile, grades, theme }) {
  return (
    <View
      style={[
        tw("w-full flex flex-row-reverse justify-between py-3"),
        {
          borderBottomWidth: 1,
          borderColor:  Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
        },
      ]}
    >
      <View style={tw("flex flex-row-reverse items-center flex-1")}>
        <Image
          resizeMode="contain"
          source={{
            uri: `https://dnvn.ir/api/v1/file/${book?.product?.book.fileIds}`,
          }}
          style={[
            tw("rounded-md"),
            {
              width: mobile ? width / 5 : width / 8,
              height: (mobile ? width / 5 : width / 8) * (4 / 2.8),
            },
          ]}
        />
        <View style={tw("flex  items-end mr-2")}>
          <Text
            style={[
              {
                fontSize: mobile ? fontSize.base : fontSize.xl,
                color:
                  theme === "light"
                    ? Colors.theme1.green79
                    : Colors.theme1.white,
                fontFamily: "Medium",
              },
            ]}
          >
            {book?.product?.book?.name || " "}
          </Text>
          <Text
            style={[
              tw(" mt-2"),
              {
                fontSize: mobile ? fontSize.sm : fontSize.base,
                color:
                  theme === "light"
                    ? Colors.theme1.green79 + "aa"
                    : Colors.theme1.white,
                fontFamily: "Regular",
              },
            ]}
          >
            {"پایه" + " " + grades[book?.product?.book?.gradeId]}
          </Text>
          {/* <Text
            style={[
              tw(" mt-1"),
              {
                fontSize: mobile ? fontSize.sm : fontSize.lg,
                color: Colors.theme1.greenBA,
                fontFamily: "Regular",
              },
            ]}
          >
            
          </Text> */}
        </View>
      </View>
      <View style={tw("flex flex-row-reverse items-center")}>
        <Text
          style={[
            tw(" py-1 px-3 rounded-sm"),
            {
              color: theme === "light" ? "#132F52" : Colors.theme1.white,
              fontSize: mobile ? fontSize.xl : fontSize.xl4,
              backgroundColor: theme === "light" ? "#F1F1F1" : null,
              borderWidth: theme === "light" ? 0 : 1,
              borderColor: "#f1f1f1",
              fontFamily: "Medium",
            },
          ]}
        >
          {book?.product?.count}
        </Text>
        <View style={tw("flex flex-row items-center")}>
          <Text
            style={{
              fontFamily: "Medium",
              fontSize: mobile ? fontSize.sm : fontSize.lg,
              color:
                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
            }}
          >
            تومان
          </Text>
          <Text
            style={[
              tw(" mr-3"),
              {
                color:
                  theme === "light"
                    ? Colors.theme1.green79
                    : Colors.theme1.white,
                fontSize: mobile ? fontSize.xl : fontSize.xl,
                fontFamily: "Medium",
              },
            ]}
          >
            {book?.product?.price}
          </Text>
        </View>
      </View>
    </View>
  );
}

const mapStateToProps = (state) => ({
  mobile: state.publicApi.mobile,
  grades: state.publicApi.grades,
  theme: state.publicApi.theme,
});

export default connect(mapStateToProps)(Book);