import { FormControl, TextField as MuiTextField, SxProps, Theme, useTheme } from "@mui/material";

import type { InputProps, TextFieldProps } from "@mui/material";
import type { ChangeEvent, FC, FocusEvent, KeyboardEvent } from "react";


const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)

interface CustomTextFieldProps {
    placeholder: string;
    value?: string;
    error?: string;
    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
    text?: string;
    sx?: SxProps<Theme>;
    InputProps?: Partial<InputProps>;
}

export default function CustomTextField({
    placeholder,
    value,
    text,
    sx,
    error,
    onChange,
    onKeyDown,
    onBlur,
    InputProps,
}: CustomTextFieldProps) {
    const theme = useTheme();

    return (
        <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
            <TextField
                defaultValue={text}
                fullWidth
                value={value}
                placeholder={placeholder}
                error={!!error}
                label={error}
                onChange={onChange}
                onKeyDown={onKeyDown}
                onBlur={onBlur}
                sx={{
                    "& .MuiInputBase-root": {
                        backgroundColor: theme.palette.background.default,
                        height: "48px",
                        borderRadius: "10px",
                    },
                    "& .MuiInputLabel-root": {
                        fontSize: "13.5px",
                        marginTop: "3px",
                    },
                    ...sx,
                }}
                InputProps={InputProps}
                inputProps={{
                    sx: {
                        borderRadius: "10px",
                        fontSize: "18px",
                        lineHeight: "21px",
                        py: 0,
                    },
                }}
                data-cy="textfield"
            />
        </FormControl>
    );
}