import { ComponentProps, useState } from "react"

function PhoneInput(props: ComponentProps<"input">) {
  const [value, setValue] = useState<string>("+998")

  const formattedValue = value
    .replaceAll(" ", "") // remove whitespace
    .slice(4) // strip the country code
    .match(/(\d{1,2})?(\d{1,3})?(\d{1,2})?(\d{1,2})?/)! // split into multiple components
    .toSpliced(0, 1, "+998") // replace global match with country code
    .filter(Boolean) // remove empty components
    .join(" ") // convert array back to string joined by spaces

  return (
    <input
      value={formattedValue}
      onChange={(event) => {
        setValue(event.target.value)
      }}
      inputMode="tel"
      {...props}
    />
  )
}