import React, { useState } from "react";
import { ScrollView, View, Text, Modal, TouchableOpacity } from "react-native";
import tailwind from "twrnc";
import { FontAwesome5 } from "@expo/vector-icons";

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

export const ModalOptions = (props) => {
  const { items, itemPress, selectedId } = props;
  const [DefaultShowModal, SetDefaultShowModal] = useState(false);
  const ShowModal = props.ShowModal || DefaultShowModal;
  const SetShowModal = props.SetShowModal || SetDefaultShowModal;
  return (
    <>
      <Modal
        transparent
        animationType="fade"
        presentationStyle="overFullScreen"
        visible={ShowModal}
      >
        <View style={tw("flex-1 w-full relative p-4 pb-12 min-w-[300px]")}>
          <View style={tw("absolute inset-0 bg-black opacity-50")}></View>
          <View style={tw("w-full mx-auto mt-auto lg:mb-auto max-w-[500px]")}>
            <ScrollView style={tw("w-full bg-white relative rounded-lg")}>
              <View style={tw("w-full max-h-[500px]")}>
                <View style={tw("w-full")}>
                  {items?.map((item, index) => {
                    return (
                      <TouchableOpacity
                        key={`ModalOptionItem-${item.id}`}
                        style={tw(
                          "w-full border-b border-gray-300 flex flex-row items-center min-h-10"
                        )}
                        onPress={() => itemPress(item)}
                      >
                        <View
                          style={tw("flex-1 px-2 flex flex-row items-center")}
                        >
                          <Text style={tw("text-black text-base")}>
                            {item.name}
                          </Text>
                        </View>
                        <View
                          style={tw("w-10 flex items-center justify-center")}
                        >
                          {selectedId === item.id && (
                            <FontAwesome5
                              name="check"
                              style={tw("text-black text-lg")}
                            />
                          )}
                        </View>
                      </TouchableOpacity>
                    );
                  })}
                </View>
              </View>
            </ScrollView>
            <View style={tw("pt-2 w-full h-12")}>
              <Button
                styles={{
                  button: "bg-white",
                  text: "text-black font-medium",
                }}
                text="Done"
                onPress={() => SetShowModal(false)}
              />
            </View>
          </View>
        </View>
      </Modal>
    </>
  );
};

export const Button = ({ text, onPress, styles = {} }) => {
  return (
    <TouchableOpacity
      style={tw(
        "w-full h-10 flex items-center justify-center bg-blue-500 rounded-lg",
        styles,
        "button"
      )}
      onPress={onPress}
    >
      <Text
        style={tw(
          "text-center text-white text-base leading-none",
          styles,
          "text"
        )}
      >
        {text}
      </Text>
    </TouchableOpacity>
  );
};

export default function App() {
  const items = [
    {
      id: "trail",
      name: "Trial",
    },
    {
      id: "beta",
      name: "Beta",
    },
    {
      id: "basic",
      name: "Basic",
    },
    {
      id: "premium",
      name: "Premium",
    },
  ];
  const [Value, SetValue] = useState("basic");
  const [ShowModal, SetShowModal] = useState(false);
  return (
    <View style={tw("flex-1 w-full p-4 flex justify-center items-center")}>
      <Button text="Launch Modal Options" onPress={() => SetShowModal(true)} />
      <ModalOptions
        {...{
          ShowModal,
          SetShowModal,
          items,
          itemPress: (item) => SetValue(item.id),
          selectedId: Value,
        }}
      />
      <View style={tw("py-4 flex flex-row items-center")}>
        <Text style={tw("font-bold text-lg")}>Selected:</Text>
        <Text style={tw("text-lg px-2 capitalize")}>{Value}</Text>
      </View>
    </View>
  );
}