import React, { useState, useEffect } from "react";
import { View, Text, ActivityIndicator } from "react-native";
import tailwind from "twrnc";

const tw = (styles, customStyles = {}, name) => {
  const custom = name ? customStyles[name] : "";
  return tailwind`${styles} ${custom}`;
};

export const Loading = (props) => {
  const { isLoading, styles, children, color, skelton } = props;
  if (isLoading) {
    return (
      <View
        style={tw(
          "flex-1 w-full flex justify-center items-center",
          styles,
          "container"
        )}
      >
        {skelton ? (
          skelton
        ) : (
          <ActivityIndicator color={color || tw("text-gray-500").color} />
        )}
      </View>
    );
  } else if (children) {
    return <>{children}</>;
  } else {
    return <></>;
  }
};

export const timeout = async (ms: number) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, ms);
  });
};

export default function App() {
  const [isLoading, SetIsLoading] = useState(true);
  const fetching = async () => {
    await timeout(3000);
    SetIsLoading(false);
  };
  useEffect(() => {
    fetching();
  }, []);
  return (
    <View style={tw("flex-1 w-full p-4 flex justify-center items-center")}>
      <View style={tw("flex-1 w-full")}>
        <Text style={tw("font-bold text-2xl pb-2 px-2")}>Default Loader</Text>
        <Loading isLoading={isLoading}>
          <View
            style={tw("w-full py-2 flex items-center justify-center flex-1")}
          >
            <Text style={tw("font-bold text-2xl")}>Done!</Text>
          </View>
        </Loading>
      </View>
      <View style={tw("flex-1 w-full")}>
        <Text style={tw("font-bold text-2xl pb-2 px-2")}>Skelton Loader</Text>
        <Loading
          isLoading={isLoading}
          skelton={
            <View
              style={tw(
                "w-full p-2 flex flex-1 border border-gray-200 shadow rounded"
              )}
            >
              <Text style={tw("font-bold text-2xl h-8 bg-gray-100")}></Text>
              <Text
                style={tw("mt-2 text-xs font-medium h-24 bg-gray-100")}
              ></Text>
            </View>
          }
        >
          <View
            style={tw(
              "w-full p-2 flex flex-1 border border-gray-200 shadow rounded"
            )}
          >
            <Text style={tw("font-bold text-2xl")}>Header</Text>
            <Text style={tw("mt-2 text-xs font-medium")}>
              Eaque ipsa quae ab illo inventore veritatis et quasi. Laboris nisi
              ut aliquip ex ea commodo consequat. Temporibus autem quibusdam et
              aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
              voluptates repudiandae sint et molestiae non recusandae.
            </Text>
          </View>
        </Loading>
      </View>
    </View>
  );
}