import { View, Text, ScrollView, Pressable } from "react-native";

import { Style, Fonts, gutters, Palette } from "../styles";
import { Input } from "./Input";
import { mainBorderRadius } from "../styles/Style";

const Tableau = ({
  headings = [],
  data = [],

  isEdit = false,

  onUpdate = () => {},
  onPressRow = null,

  mainColor = Palette.primary,
  transparentColor = Palette.transparentPrimary,
}) => {
  const filteredHeadings = headings.filter(({ condition = true }) => condition);

  return (
    <>
      <View
        style={{
          ...Style.containerSpaceBetween,
          ...Style.containerItem,
          backgroundColor: "transparent",
          padding: gutters / 2,
          paddingVertical: gutters / 4,
        }}
      >
        {filteredHeadings.map(({ title = "", flex }, index) => (
          <View style={{ flex, paddingRight: 10 }}>
            <Text
              key={index}
              style={Fonts({
                type: "default",
                style: {
                  textAlign: !index
                    ? "left"
                    : index === filteredHeadings?.length - 1
                    ? "right"
                    : "center",
                  color: mainColor,
                  borderRightWidth:
                    index !== filteredHeadings?.length - 1 ? 1 : 0,
                  borderRightColor: transparentColor,
                },
              })}
            >
              {title}
            </Text>
          </View>
        ))}
      </View>

      {data?.length > 0 ? (
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{
            flex: 1,
            paddingTop: gutters,
            paddingBottom: 300,
          }}
        >
          {data.map((item, indexItemList) => {
            return (
              <>
                <Pressable
                  key={indexItemList}
                  onPress={() => onPressRow?.({ item })}
                  style={{
                    ...Style.containerSpaceBetween,
                    alignItems: "flex-start",
                    paddingHorizontal: gutters / 2,
                  }}
                >
                  {filteredHeadings.map(
                    (
                      { key, type = "DEFAULT", textStyle = () => {} },
                      indexColumn
                    ) => {
                      const { flex, isEditable, renderCell } =
                        filteredHeadings[indexColumn];

                      const content = renderCell({
                        item,
                        key,
                        indexItemList,
                      });

                      return (
                        <View style={{ flex, paddingRight: 10 }}>
                          {type === "CUSTOM" ? (
                            content
                          ) : isEdit && isEditable ? (
                            <Input
                              key={indexColumn}
                              placeholder={""}
                              value={item?.[key] || ""}
                              setValue={(value) =>
                                onUpdate({
                                  index: indexItemList,
                                  key,
                                  value,
                                })
                              }
                              type={!indexColumn ? "textarea" : "default"}
                              borderType="dashed"
                              containerStyle={{
                                borderRadius: mainBorderRadius / 2,
                                width: "100%",
                                backgroundColor: "transparent", // 'white
                              }}
                              textInputStyle={{
                                textAlign: !indexColumn
                                  ? "left"
                                  : indexColumn === filteredHeadings?.length - 1
                                  ? "right"
                                  : "center",
                              }}
                            />
                          ) : (
                            <Text
                              key={indexColumn}
                              style={Fonts({
                                type: "default",
                                style: {
                                  textAlign: !indexColumn ? "left" : "center",
                                  ...textStyle({ item }),
                                },
                              })}
                            >
                              {content}
                            </Text>
                          )}
                        </View>
                      );
                    }
                  )}
                </Pressable>

                <View
                  style={{
                    width: "100%",
                    backgroundColor: transparentColor,
                    height: 1,
                    marginVertical: gutters / 2,
                  }}
                />
              </>
            );
          })}
        </ScrollView>
      ) : (
        <View
          style={{
            ...Style.containerCenter,
            flex: 1,
          }}
        >
          <Text
            style={Fonts({
              type: "default",
              style: {
                textAlign: "center",
                color: mainColor,
              },
            })}
          >
            Il n'y a pas encore de données
          </Text>
        </View>
      )}
    </>
  );
};

export default Tableau;