import React from "react";
import { Input } from "@chakra-ui/react";
import { Field } from "../ui/field";
import { Data } from "../../models/game";

interface Props {
  label: string;
  textField: string;
  field: string;
  bg: string;
  handleInputChange: <G extends keyof Data>(
    name: string,
    value: Data[G],
  ) => void;
  required: boolean;
}

const SingleFieldNumericInput = ({
  label,
  textField,
  field,
  bg,
  handleInputChange,
  required,
}: Props) => {
  const isValidSteamValue = (v: string) => {
    const s = v.trim();
    if (!s) return false;
    if (/^\d+$/.test(s)) return true;
    return s.includes("store.steampowered.com");
  };

  const showError = field.trim() !== "" && !isValidSteamValue(field);

  return (
    <Field
      mb="3"
      label={label}
      errorText="Enter a Steam App Id or a Steam App URL"
    >
      <Input
        id={textField}
        name={textField}
        bg={bg}
        type="text"
        inputMode="text"
        aria-invalid={showError}
        placeholder="Steam Id or Steam URL"
        borderWidth="1px"
        borderStyle="solid"
        borderColor={{ base: "gray.500", _invalid: "red.500" }}
        rounded="md"
        value={field}
        required={required}
        onChange={(e) => {
          handleInputChange(textField, e.target.value);
        }}
      />
    </Field>
  );
};

export default SingleFieldNumericInput;