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

const tw = (styles) => {
  return tailwind`${styles}`;
}

export const InputOptions = ({items, selectedId, onChange, label}) => {
  const [Selected, SetSelected] = useState(selectedId);
  return (
    <View style={tw("w-full")}>
      {label && (
        <View style={tw("pb-1")}>
          <Text
            style={tw("text-sm font-medium capitalize")}
          >
            {label}
          </Text>
        </View>
      )}
      <View
        style={tw("w-full")}
      >
        {items?.map((item) => {
          return (
            <TouchableOpacity
              key={`input-option-${item.id}`}
              activeOpacity={0.5}
              onPress={() => {
                SetSelected(item.id);
                if (onChange) {
                  onChange(item.id);
                }
              }}
            >
              <View
                style={tw(
                  `mt-4 w-full rounded-lg border-2 border-gray-200 flex flex-row min-h-24 overflow-hidden bg-white py-4 px-6 ${
                    Selected === item.id
                      ? "border-blue-500"
                      : "border-gray-200"
                  }`
                )}
              >
                <View style={tw("flex-1 flex justify-center")}>
                  <View style={tw("w-full")}>
                    <Text style={tw("font-medium text-black text-lg")}>
                      {item.name}
                    </Text>
                  </View>
                  <View style={tw("w-full")}>
                    <Text style={tw("text-gray-500 text-sm")}>
                      {item.description}
                    </Text>
                  </View>
                </View>
                <View style={tw("pl-4 flex justify-center items-end")}>
                  <Text style={tw("font-medium text-black text-lg")}>
                    {item.price}
                  </Text>
                  <Text style={tw("text-gray-500 text-sm")}>
                    {item.interval}
                  </Text>
                </View>
              </View>
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
};

export default function App() {
  const items = [
    {
      id: "trail",
      name: "Trial",
      description: "7 day trial, no credit card required",
      price: "$0",
      interval: "7 days",
    },
    {
      id: "beta",
      name: "Beta",
      description:
        "Beta pricing is a flat fee per month. Future cost will include storage size.",
      price: "$6",
      interval: "/mo",
    },
    {
      id: "basic",
      name: "Basic",
      description: "10GB of storage. $0.25 per GB-month thereafter",
      price: "$12",
      interval: "/mo",
    },
    {
      id: "premium",
      name: "Premium",
      description: "100GB of storage. $0.25 per GB-month thereafter",
      price: "$24",
      interval: "/mo",
    },
  ];
  const [Value, SetValue] = useState("basic")
  return (
    <View style={tw("flex-1 w-full p-4 flex justify-center items-center")}>
      <InputOptions label="subscription" items={items} selectedId={Value} onChange={(id) => SetValue(id)} />
      <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>
  );
}