/**
 * Wrapper around material-ui's TextField component that styles it with 
 * Bitburner's UI theme
 */

import React from "react";
import { makeStyles, TextField, TextFieldProps } from "@material-ui/core";

const backgroundColorStyles = {
    backgroundColor: 'rgba(57, 54, 54, 0.9)',
    '&:hover': {
        backgroundColor: 'rgba(70, 70, 70, 0.9)',
    },
};

const formControlStyles = {
    border: '1px solid #e2e2e1',
    overflow: 'hidden',
    borderRadius: 4,
    color: 'white',
    ...backgroundColorStyles,
};

const useStyles = makeStyles({
    root: {
        ...formControlStyles,
    },
});

const useInputStyles = makeStyles({
    root: {
        ...backgroundColorStyles,
        color: 'white',
    },
    focused: {
        backgroundColor: 'rgba(70, 70, 70, 0.9)',
    },
    disabled: {
        color: 'white',
    },
});

const useLabelStyles = makeStyles({
    root: {
        color: 'white',
    },
    focused: {
        color: 'white !important', // Need important to override styles from FormLabel
    },
    disabled: {
        color: 'white !important', // Need important to override styles from FormLabel
    },
})

export const MuiTextField: React.FC<TextFieldProps> = (props: TextFieldProps) => {
    return (
        <TextField {...props} 
            classes={{
                ...useStyles(),
                ...props.classes,
            }}
            InputProps={{ 
                classes: {
                    ...useInputStyles(),
                    ...props.InputProps?.classes,
                },
                ...props.InputProps,
            }} 
            InputLabelProps={{ 
                classes: {
                    ...useLabelStyles(),
                    ...props.InputLabelProps?.classes,
                },
                ...props.InputLabelProps,
            }} />
    )
}