import {useState} from "react";
import '../assets/styles/home.css';
import {
    createTheme,
    Divider,
    outlinedInputClasses,
    TextField,
    type Theme,
    ThemeProvider,
    useTheme
} from "@mui/material";

export default function Home() {
    const [searchText, setSearchText] = useState('');

    const customTheme = (outerTheme: Theme) =>
        createTheme({
            palette: {
                mode: outerTheme.palette.mode,
            },
            components: {
                MuiTextField: {
                    styleOverrides: {
                        root: {
                            '--TextField-brandBorderColor': '#E0E3E7',
                            '--TextField-brandBorderHoverColor': '#B2BAC2',
                            '--TextField-brandBorderFocusedColor': '#6F7E8C',
                            '& label': {
                                color: 'var(--TextField-brandBorderColor)',
                            },
                            '& label.Mui-focused': {
                                color: 'var(--TextField-brandBorderColor)',
                            },
                            '& input': {
                                color: 'var(--TextField-brandBorderColor)',
                                borderColor: 'var(--TextField-brandBorderColor)',
                            },
                        },
                    },
                },
                MuiOutlinedInput: {
                    styleOverrides: {
                        notchedOutline: {
                            borderColor: 'var(--TextField-brandBorderColor)',
                        },
                        root: {
                            [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
                                borderColor: 'var(--TextField-brandBorderHoverColor)',
                            },
                            [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
                                borderColor: 'var(--TextField-brandBorderFocusedColor)',
                            },
                        },
                    },
                },
                MuiDivider: {
                    styleOverrides: {
                        root: {
                            '--TextField-brandBorderColor': '#E0E3E7',
                            borderColor: 'var(--TextField-brandBorderColor)',
                            borderWidth: 1,
                            width: '95%',
                        }
                    }
                }
            }
        });
    const outerTheme = useTheme();

    function handleSearch(text: string) {
        setSearchText(text);
    }

    return (
        <ThemeProvider theme={customTheme(outerTheme)}>
            <div className="bg-dark">
                <div className="search-container">
                    <TextField
                        id="search-field"
                        label="Search"
                        variant="outlined"
                        value={searchText}
                        onChange={(e) => handleSearch(e.target.value)}
                        fullWidth
                    />
                </div>
                <div style={{justifyItems: 'center'}}>
                    <Divider sx={{marginTop: '10px', marginBottom: '10px'}}/>
                </div>
                <div className="list-container">
                    <p>{searchText} //</p>
                </div>
            </div>
        </ThemeProvider>
    );
}