import {useEffect, useState} from "react";
import '../assets/styles/home.css';
import {
    Box, Button,
    Divider, Fab, IconButton, InputAdornment,
    TextField,
    ThemeProvider, Typography,
    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";
import ItemDialog from "~/components/itemDialog";
import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag';
import ReportDialog from "~/components/reportDialog";
import LoopIcon from '@mui/icons-material/Loop';
import ClearIcon from '@mui/icons-material/Clear';

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

    const [searchText, setSearchText] = useState('');
    const [isFetchingList, setIsFetchingList] = useState(false);
    const [totalBlacklistItems, setTotalBlacklistItems] = useState<BlacklistItem[]>([]);
    const [blacklistItems, setBlacklistItems] = useState<BlacklistItem[]>([]);
    const [showDialog, setShowDialog] = useState(false);
    const [currentDialogBlacklistItem, setCurrentDialogBlacklistItem] = useState<BlacklistItem|null>(null);
    const [fabIsHovered, setFabIsHovered] = useState(false);
    const [showReportDialog, setReportShowDialog] = useState(false);
    const [triggerUpdate, setTriggerUpdate] = useState(0);
    const [showEraseButton, setShowEraseButton] = useState(false);

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

    useEffect(() => {
        if (searchText !== ""){
            setShowEraseButton(true);
            setIsFetchingList(true);
            let result = search(searchText);
            console.log(result);
            setBlacklistItems(result);
            setIsFetchingList(false);
        } else {
            setShowEraseButton(false);
            setBlacklistItems(totalBlacklistItems);
        }
    }, [searchText]);

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

    function handleItemClick(item: BlacklistItem){
        setCurrentDialogBlacklistItem(item);
        setShowDialog(true);
    }

    const handleDialogClose = () => {
        setShowDialog(false);
    };

    const handleReportDialogOpen = () => {
        setReportShowDialog(true);
    };

    const handleReportDialogClose = () => {
        setReportShowDialog(false);
    };

    const sync = () => {
        setSearchText('');
        setTriggerUpdate(triggerUpdate + 1)
    };

    const handleClickEraseSearch = () => {
        setSearchText("");
    };

    const search = (searchString: string) => {
        searchString = searchString.toLowerCase();
        return totalBlacklistItems.filter((item) => {
            return item.link.toLowerCase().includes(searchString)
            || item.nicknames.some((nickname) => {
                return nickname.toLowerCase().includes(searchString)
            });
        });
    };

    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
                        slotProps={{
                            input: {
                                endAdornment: <InputAdornment position="end">
                                    { showEraseButton ? <IconButton
                                        onClick={handleClickEraseSearch}
                                        edge="end"
                                        sx={{
                                            marginRight: '1px',
                                            padding: '5px!important',
                                            '&:hover': {
                                                // backgroundColor: '#282c34',
                                                backgroundColor: '#E0E3E7',
                                                border: '1px solid #E0E3E7',
                                                '& > .MuiSvgIcon-root': {
                                                    color: '#282c34',
                                                },
                                            }
                                        }}
                                    >
                                       <ClearIcon sx={{
                                           color: '#E0E3E7',
                                           fontSize: '1.2rem'
                                       }}/>
                                    </IconButton> : "" }
                                </InputAdornment>,
                            },
                        }}
                    />
                    <Button
                        variant="outlined"
                        sx={{ marginLeft: '10px' }}
                        onClick={() => {
                            sync();
                        }}
                    >
                        <LoopIcon/>
                    </Button>
                </div>
                <div style={{justifyItems: 'center'}}>
                    <Divider sx={{marginTop: '10px', marginBottom: '10px'}}/>
                </div>
                <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems} showDialog={handleItemClick}></ItemList>
                <ItemDialog blacklistItem={currentDialogBlacklistItem} open={showDialog} handleClose={handleDialogClose}></ItemDialog>
                <ReportDialog open={showReportDialog} handleClose={handleReportDialogClose}/>
                <Fab
                    onClick={() => handleReportDialogOpen()}
                    onMouseEnter={() => setFabIsHovered(true)}
                    onMouseLeave={() => setFabIsHovered(false)}
                    variant={fabIsHovered ? 'extended' : 'circular'}
                    sx={{
                        position: 'fixed',
                        bottom: 16,
                        right: 16,
                        zIndex: 1000,
                        width: fabIsHovered ? '160px' : '56px', // Переход между кругом и овалом
                        transition: 'width 0.3s ease-in-out',
                        overflow: 'hidden',
                    }}
                >
                    <OutlinedFlagIcon />
                    <Box
                        sx={{
                            opacity: fabIsHovered ? 1 : 0,
                            ml: fabIsHovered ? 1 : 0,
                            width: fabIsHovered ? 'auto' : 0,
                            transition: 'all 0.1s ease-in-out',
                            whiteSpace: 'nowrap',
                        }}
                    >
                        <Typography variant="button">{fabIsHovered ? 'Send report' : ''}</Typography>
                    </Box>
                </Fab>
            </div>
        </ThemeProvider>
    );
}