import { GenerateRouteForm } from "../components/generate_route_form";
import { FullPageLoader } from "../../common/components/full_page_loader";
import { ApiRequestStatus } from "../../common/const/api_request_states";
import { useGenerateRoute } from "../hooks/useGenerateRoute";
import { use } from "i18next";
import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
import { LIGHT_THEME } from "../../common/const/theme";
import { useTranslation } from "react-i18next";

interface GenerateRoutePageProps {
  townId: number;
}

export const GenerateRoutePage = ({ townId }: GenerateRoutePageProps) => {
  const { control, onSubmit } = useGenerateRoute(townId);
  const { t } = useTranslation();

  return (
    <View style={{ flex: 1 }}>
      <GenerateRouteForm control={control} />
      <TouchableOpacity onPress={onSubmit} style={styles.button}>
        <Text style={styles.text}>
          {t("generateRouteScreen.generateRouteButton")}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 30,
  },
  button: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: LIGHT_THEME.color.primary,
    borderRadius: 25,
    bottom: 10,
    width: 200,
    height: 50,
    elevation: 5,
    alignSelf: "center",
  },
  text: {
    color: LIGHT_THEME.color.white,
    fontWeight: "bold",
  },
});
