111 lines
3.7 KiB
TypeScript
111 lines
3.7 KiB
TypeScript
"use client"
|
|
import { Box, Card, CardContent } from "@mui/material"
|
|
import Grid from "@mui/material/Grid2"
|
|
import React, { useEffect, useState } from "react"
|
|
import { useTranslation } from "react-i18next"
|
|
import Button from "@atoms/Button"
|
|
import Input from "@atoms/Input"
|
|
import Title from "@atoms/Title"
|
|
|
|
interface IdentityDocumentNumberProps {
|
|
documentType: string
|
|
onSubmit: (documentNumber: string) => void
|
|
}
|
|
|
|
const IdentityDocumentNumber: React.FC<IdentityDocumentNumberProps> = ({ documentType, onSubmit }) => {
|
|
const [inputValue, setInputValue] = useState<string>("")
|
|
const [keyboardMode, setKeyboardMode] = useState<"numeric" | "alpha">("numeric")
|
|
const [isAlphaEnabled, setIsAlphaEnabled] = useState<boolean>(false)
|
|
const { t } = useTranslation()
|
|
|
|
|
|
useEffect(() => {
|
|
const alphaDocuments = ["PASAPORTE", "CURP", "RFC", "NIE", "RUT"]
|
|
setIsAlphaEnabled(alphaDocuments.includes(documentType.toUpperCase()))
|
|
setKeyboardMode(isAlphaEnabled ? "alpha" : "numeric")
|
|
}, [documentType, isAlphaEnabled])
|
|
|
|
const handleKeyPress = (key: string) => {
|
|
setInputValue((prev) => prev + key)
|
|
}
|
|
|
|
const handleDelete = () => {
|
|
setInputValue((prev) => prev.slice(0, -1))
|
|
}
|
|
|
|
const renderKeyboard = () => {
|
|
if (keyboardMode === "numeric") {
|
|
return (
|
|
<>
|
|
{["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"].map((num) => (
|
|
<Grid key={num} size={{ xs: 4 }}>
|
|
<Button label={num} onClick={() => handleKeyPress(num)} variant="primary" className="h-16 w-full" />
|
|
</Grid>
|
|
))}
|
|
</>
|
|
)
|
|
} else {
|
|
return (
|
|
<>
|
|
{"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map((letter) => (
|
|
<Grid key={letter} size={{ xs: 2 }}>
|
|
<Button label={letter} onClick={() => handleKeyPress(letter)} variant="primary" className="h-16 w-full" />
|
|
</Grid>
|
|
))}
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card sx={{ width: "100%", maxWidth: "100%" }}>
|
|
<CardContent>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
height: "100%",
|
|
p: 2,
|
|
}}
|
|
>
|
|
{/* Título */}
|
|
<Title text={`${t('msj_enter_number_of')} ${documentType}`} size="h4" />
|
|
|
|
<Input
|
|
type="text"
|
|
placeholder= {t('msj_enter_document_number')}
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
/>
|
|
|
|
<Grid container spacing={2} justifyContent="center" alignItems="center" sx={{ mt: 3 }}>
|
|
<Grid size={{ xs: 4 }}>
|
|
<Button label= {t('lbl_delete')} onClick={handleDelete} variant="danger" className="h-16 w-full" />
|
|
</Grid>
|
|
<Grid size={{ xs: 4 }}>
|
|
<Button label={t('lbl_cancel')} onClick={() => setInputValue("")} variant="danger" className="h-16 w-full" />
|
|
</Grid>
|
|
{renderKeyboard()}
|
|
<Grid size={{ xs: 4 }}>
|
|
<Button label={t('lbl_enter')} onClick={() => onSubmit(inputValue)} variant="success" className="h-16 w-full" />
|
|
</Grid>
|
|
{isAlphaEnabled && (
|
|
<Grid size={{ xs: 4 }}>
|
|
<Button
|
|
label={`${t('msj_change_to')} ${keyboardMode === "numeric" ? t('lbl_alphabetical') : t('lbl_numeric')}`}
|
|
onClick={() => setKeyboardMode(keyboardMode === "numeric" ? "alpha" : "numeric")}
|
|
variant="info"
|
|
className="h-16 w-full"
|
|
/>
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default IdentityDocumentNumber
|