import {useEffect, useState} from "react";
import '../assets/styles/home.css';
import {
    Divider,
    TextField,
    ThemeProvider,
    useTheme
} from "@mui/material";
import {getAll} from '~/api';
import customTheme from "~/assets/mui/themes/home";
import {BlacklistItem} from "~/classes/blacklistItem";
import {ResponseError} from "~/classes/responseError";
import ItemList from "~/components/itemList";

export default function Home() {
    const outerTheme = useTheme();

    const [searchText, setSearchText] = useState('');
    const [isFetchingList, setIsFetchingList] = useState(false);
    const [blacklistItems, setBlacklistItems] = useState<BlacklistItem[]>([]);

    useEffect(() => {
        let isIgnore = false;
        setIsFetchingList(true);
        getAll(searchText).then((res: BlacklistItem[] | ResponseError | undefined)=> {
            if (!isIgnore) {
                if (res instanceof Array){
                    setBlacklistItems(res);
                } else if (res instanceof ResponseError) {
                    // TODO error handler
                    console.log(res);
                }
                setIsFetchingList(false);
            }
        });
        return () => {
            isIgnore = true; // При следующем изменении someValue старый запрос будет проигнорирован
        };
    }, [searchText]);

    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>
                <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems}></ItemList>
                {/*<div className="list-container">*/}
                {/*    <div className="item-list">*/}
                {/*        {blacklistItems.map((item, i) => {*/}
                {/*            return <Button variant="text">{item.link}</Button>*/}
                {/*        })}*/}
                {/*    </div>*/}
                {/*</div>*/}
            </div>
        </ThemeProvider>
    );
}