import { Controller, Control } from "react-hook-form";
import { View, StyleSheet } from "react-native";
import { CustomTextInput } from "../../common/components/form/text_input";
import { GenerateRouteFormValues } from "./../hooks/useGenerateRoute";
import { DateTextInput } from "../../common/components/form/date_text_input";
import { useTranslation } from "react-i18next";

interface GenerateRouteFormProps {
  control: Control<GenerateRouteFormValues, any>;
}

export const GenerateRouteForm = ({ control }: GenerateRouteFormProps) => {
  const { t } = useTranslation();
  return (
    <View style={styles.mainContainer}>
      <Controller
        name="start"
        control={control}
        defaultValue={""}
        render={({
          field: { onChange, onBlur, value },
          formState: { errors },
        }) => (
          <DateTextInput
            label={t("forms.startTime")}
            value={value}
            onBlur={onBlur}
            onChangeText={(text) => onChange(text)}
            errors={errors.start?.message}
            mode="time"
          />
        )}
        rules={{
          required: "Start time is required",
        }}
      />
      <Controller
        name="end"
        control={control}
        defaultValue={""}
        render={({
          field: { onChange, onBlur, value },
          formState: { errors },
        }) => (
          <DateTextInput
            label={t("forms.endTime")}
            value={value}
            onBlur={onBlur}
            onChangeText={onChange}
            errors={errors.end?.message}
            mode="time"
          />
        )}
        rules={{
          required: "End time is required",
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    width: "100%",
    alignItems: "center",
    padding: 20,
    gap: 20,
  },
});
