import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import {FormControl, InputAdornment, InputLabel, OutlinedInput, Tabs} from "@mui/material";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import * as React from "react";
import {useState} from "react";
import Tab from "@mui/material/Tab";
import {a11yProps} from "../../components/core/tabProps";
import {CustomTabPanel} from "../../components/core/TabPanel";
import {BarList} from "../../components/bar/BarList";

export function MyBarPage() {
    const [value, setValue] = React.useState(0);
    const handleChange = (event, newValue) => setValue(newValue);
    const [findString, setFindString] = useState("");

    return (
        <Box>
            {/*Заголовок*/}
            <Toolbar>
                <Typography variant="h6" component="div" sx={{flexGrow: 1}}>Мои бары</Typography>
            </Toolbar>
            {/*Поиск*/}
            <Paper elevation={6} sx={{my: 2}}>
                <FormControl sx={{m: 1, width: 'calc(100% - 20px'}}>
                    <InputLabel htmlFor="outlined-adornment-amount">Поиск</InputLabel>
                    <OutlinedInput
                        onChange={(e) => setFindString(e.target.value)}
                        label="With normal TextField"
                        startAdornment={
                            <InputAdornment position="start">
                                <IconButton edge="end">
                                    <SearchIcon/>
                                </IconButton>
                            </InputAdornment>
                        }
                    />
                </FormControl>
            </Paper>
            {/*Рабочее поле ингредиентов*/}
            <Box>
                <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
                    <Tab label="Мои бары" {...a11yProps(0)} />
                    <Tab label="Список" {...a11yProps(1)} />
                </Tabs>
            </Box>
            <Box>
                <CustomTabPanel value={value} index={0}>
                    <BarList all={false} find={findString}/>
                </CustomTabPanel>
                <CustomTabPanel value={value} index={1}>
                    <BarList all={true} find={findString}/>
                </CustomTabPanel>
            </Box>
            {/*Модальное окно информации об ингредиенте*/}
            {/*<IngredientInfoModal ingredient={selectedInfo} open={openModal} closeHandler={handleCloseModal}/>*/}
        </Box>
    )
}