import React, { useGlobal } from "reactn";
import { View, Text } from "react-native";

import useLayoutType from "../hooks/useLayoutType";

import Button from "./Button";

import { Style, Fonts } from "../styles";
import { responsiveScreenHeight } from "react-native-responsive-dimensions";

const EmptyFlashListPlaceholder = ({
  loading = false,
  text = "-",
  buttonData = {},
}) => {
  const [, setShowSearch] = useGlobal("showSearch");

  const { isMobile } = useLayoutType;

  if (loading) {
    return (
      <Text style={Fonts({ type: "default", style: { textAlign: "center" } })}>
        Chargement en cours...
      </Text>
    );
  }

  return (
    <View
      style={{
        ...Style.containerCenter,
        alignSelf: "center",
        width: isMobile ? "100%" : "50%",
        height: responsiveScreenHeight(50),
      }}
    >
      <Text style={Fonts({ type: "default", style: { textAlign: "center" } })}>
        {text}
      </Text>

      {buttonData?.text?.length > 0 && (
        <Button
          text={buttonData?.text || "Ajouter une tâche"}
          type="secondary"
          onPress={() => {
            setShowSearch(false);

            buttonData?.onPress?.() || (() => console.log("null"));
          }}
          containerStyle={{
            alignSelf: "center",
            width: "100%",
          }}
        />
      )}
    </View>
  );
};

export default EmptyFlashListPlaceholder;