import { useState } from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import InputLabel from "@mui/material/InputLabel";
import { InputBase } from "@mui/material";
import { styled } from "@mui/material";
import { useSelector } from "react-redux";

const BootstrapInput = styled(InputBase)(({ theme }) => ({
    'label + &': {
        marginTop: theme.spacing(3),
    },
    '& .MuiInputBase-input': {
        position: 'relative',
        backgroundColor: "#2E2E2E",
        border: '1px solid #ced4da',
        color:"#FFF",
        fontSize: 13,
        padding: '5px 0',
        paddingRight:'50px !important',
        paddingLeft:"10px",
        transition: theme.transitions.create(['border-color', 'box-shadow']),
        '&:focus': {
            borderRadius: 4,
            borderColor: '#80bdff',
            boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
        },
    },
    '& .MuiSvgIcon-root': {
        color:"#FFF !important"
    },
}));

const Filter = () => {

    const products = useSelector((state) => state.products.products.data)

    const [input, setInput] = useState({
        type:0,
        sort:0,
        show:1,
    })

    const handleChange = (event) => {
        setInput({...input, [event.target.name]:event.target.value });
    };


    return (
        <Box
            sx={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                backgroundColor: "background.black",
                color: "white",
                px: 2, // Add padding around the box
                my: 4
            }}
        >
            {/* Left Side: Page Title */}
            <Typography variant="body2">
                {`${products.length} Item`}
            </Typography>

            {/* Right Side: Option Inputs */}
            <Box sx={{ display: "flex", gap: 2 }}>


                <FormControl sx={{ m: 1, display:"flex", flexDirection:"row" }} variant="standard">
                    <Typography variant="body2" sx={{mr:1, my:"auto"}}>Filter</Typography>
                    <Select
                        labelId="demo-customized-select-label"
                        id="demo-customized-select"
                        value={input.type}
                        onChange={handleChange}
                        input={<BootstrapInput />}
                        name="type"
                    >
                        <MenuItem value={0}>All</MenuItem>
                        <MenuItem value={1}>Red</MenuItem>
                    </Select>
                </FormControl>

                <FormControl sx={{ m: 1, display:{xs:"none", sm:"none", md:"flex" }, flexDirection:"row" }} variant="standard">
                    <Typography variant="body2" sx={{mr:1, my:"auto"}}>Sort By</Typography>
                    <Select
                        labelId="demo-customized-select-label"
                        id="demo-customized-select"
                        value={input.sort}
                        onChange={handleChange}
                        input={<BootstrapInput />}
                        name="sort"
                    >
                        <MenuItem value={0}>All</MenuItem>
                        <MenuItem value={1}>Red</MenuItem>
                    </Select>
                </FormControl>

            </Box>
        </Box>
    );
};

export default Filter;
