import { useState } from "react";
import { TouchableOpacity, View, Text, TextInput, Alert } from "react-native";

import { styled } from "nativewind";
import { FontAwesome5 } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";

import TimeAgo from "@andordavoti/react-native-timeago";

type StoreItemProps = {
  name: string;
  volume: string;
  price: string;
  date: Date;
  storeKey: string;
};

export default function StoreItem(props: StoreItemProps) {
  const StyledText = styled(Text);
  const StyledTimeAgo = styled(TimeAgo);
  const StyledFontAwesome = styled(FontAwesome5);
  const StyledIonicons = styled(Ionicons);

  const [editing, setEditing] = useState(false);
  const [locked, setLocked] = useState(false);
  const [price, setPrice] = useState(props.price);

  const updatePrice = async () => {
    setLocked(true);
    const res = await fetch(
      `${process.env.EXPO_PUBLIC_BACKEND_URL}/?` +
        new URLSearchParams({
          storeKey: props.storeKey,
          itemName: props.name,
          itemPrice: price,
        }),
      {
        method: "PUT",
        mode: "cors",
        redirect: "follow",
      }
    );

    if (!res.ok)
      Alert.alert("Error!", "Server error. Please report to ak95@riseup.net");

    setLocked(false);
    setEditing(!editing);
  };

  return (
    <View
      className="flex flex-row w-[100vw] p-2 justify-between items-center border-b dark:text-white dark:border-white"
      style={{ flex: 1 }}
    >
      <View className="flex justify-center items-start gap-2">
        <StyledText className="text-xl dark:text-white">
          {props.name}
        </StyledText>
        <StyledText className="text-lg dark:text-white">
          {props.volume} Fl. Oz.
        </StyledText>
      </View>
      <View className="flex justify-center items-end gap-0">
        <View className="flex flex-row items-center items-center gap-x-1">
          <StyledText className="text-lg dark:text-white">$</StyledText>
          {editing ? (
            <View className="flex flex-row border rounded dark:border-white items-center gap-x-2 py-1 pr-2">
              <TextInput
                className="text-lg dark:text-white"
                textAlign={"center"}
                onChangeText={(text) => {
                  if (!locked) {
                    if (text.includes(".")) {
                      const split = text.split(".");
                      if (split.length < 3) {
                        const righthand = split[1];
                        if (righthand.length <= 2) {
                          setPrice(text);
                        }
                      }
                    } else setPrice(text);
                  }
                }}
                inputMode="decimal"
                value={price}
              />
              <TouchableOpacity onPress={updatePrice}>
                <StyledIonicons
                  name="checkmark"
                  className="text-lg dark:text-white"
                />
              </TouchableOpacity>
            </View>
          ) : (
            <View className="flex flex-row items-end gap-x-2 py-1 pr-2">
              <StyledText className="text-lg dark:text-white">
                {price}&nbsp;
              </StyledText>
              <TouchableOpacity onPress={() => setEditing(!editing)}>
                <StyledFontAwesome
                  name="pencil-alt"
                  className="text-lg dark:text-white"
                />
              </TouchableOpacity>
            </View>
          )}
        </View>
        <StyledTimeAgo
          dateTo={props.date}
          className="text-lg dark:text-white"
        />
      </View>
    </View>
  );
}