import {Grid, Box, Stack, Button, FormControl, MenuItem, Select, Slider, Typography, styled} from “@mui/material”;
import React, {useState} from “react”;
import {AddCircleIcon, ArrowDropDownIcon} from “…/…/icons”;
import FormatPrice from “…/…/CicapDiary/FormatPrice/FormatPrice”;
import {useSelector} from “react-redux”;
import {AppState} from “…/…/…/store/store”;

const AssetsBuySell = () => {
const [orderSide, setOrderSide] = useState(“buy” as “buy” | “sell”);
const symbol = useSelector((state: AppState) => state.screenerSlice.symbol);

const StyledSlider = styled(Slider)({
color: orderSide === “buy” ? “#006943” : “#B41C18”,
height: 2,
“& .MuiSlider-thumb”: {
backgroundColor: “#fff”,
border: orderSide === “buy” ? “2px solid #006943” : “2px solid #B41C18”,
transform: “translateY(-7.5px) translateX(-4px)”,
height: 15,
width: 15,
“&.MuiSlider-thumbColorPrimary”: {
boxShadow: “none”,
},
},
“& .MuiSlider-rail”: {
backgroundColor: “#D9D9D9”,
opacity: 1,
},
“& .MuiSlider-mark”: {
height: 9,
width: 9,
borderRadius: “50%”,
backgroundColor: “#fff”,
border: “2px solid #D9D9D9”,
“&.MuiSlider-markActive”: {
height: 11,
width: 11,
backgroundColor: “#fff”,
opacity: 1,
transform: “translateY(-7.5px) translateX(-4px)”,
border: orderSide === “buy” ? “2px solid #006943” : “2px solid #B41C18”,
},
},
});

const [showLimit, setShowLimit] = useState(false);
const [showTPSL, setShowTPSL] = useState(false);
const [price, setPrice] = useState<number>(0);

const [priceSymbol, setPriceSymbol] = useState(“USDT”);
const min = 8440;
const max = 24999;
const range = max - min;
const marks = [
{value: min},
{value: min + (range * .25)},
{value: min + (range * .5)},
{value: min + (range * .75)},
{value: max},
];

return (
<Box className=“scroll-block” sx={{height: “100%”, overflowY: “auto”, overflowX: “hidden”, position: “relative”, bgcolor: theme => theme.palette.background.paper, borderRadius: “8px”}}>
<Stack sx={{bgcolor: theme => theme.palette.background.paper, m: 1.5, mb: 1}}>

<Grid mb={1.1} >
<Button onClick={() => setOrderSide(“buy”)} variant={orderSide === “buy” ? “contained” : “text”} color=“black”
sx={{backgroundColor: orderSide === “buy” ? “#EEEEEE” : “”, px: 1.6, fontWeight: orderSide === “buy” ? 600 : 400, fontSize: 13, py: .2, color: orderSide === “buy” ? “#191919” : “#999999”, “&:hover”: {boxShadow: “none”}}}>Купить</Button>
<Button onClick={() => setOrderSide(“sell”)} variant={orderSide === “sell” ? “contained” : “text”} color=“black”
sx={{backgroundColor: orderSide === “sell” ? “#EEEEEE” : “”, ml: 1, fontWeight: orderSide === “sell” ? 600 : 400, fontSize: 13, px: 1.6, py: .2, color: orderSide === “sell” ? “#191919” : “#999999”, “&:hover”: {boxShadow: “none”}}}>Продать</Button>
</Grid>

<Box display=“flex” alignItems=“center” justifyContent=“space-between” onClick={() => setShowLimit(prev => !prev)}
sx={{cursor: “pointer”, backgroundColor: theme => theme.palette.grey[200], color: theme => theme.palette.text.secondary, px: 1.5, py: .8, borderRadius: showLimit ? “8px 8px 0 0” : “8px”}} >
<Typography fontSize={13} className=“unselectable” fontWeight={400} >Лимит</Typography>
<ArrowDropDownIcon sx={{fontSize: “9px”, mr: .5, transform: !showLimit ? “” : “rotate(180deg)”}} />
</Box>
{
showLimit && <>
<Box display=“flex” alignItems=“center” justifyContent=“space-between” mt={.16} sx={{backgroundColor: theme => theme.palette.grey[200], color: theme => theme.palette.text.secondary, px: 1.5, py: 1.3}} >
<Typography fontSize={13} className=“unselectable” color=“#999999”>Цена</Typography>
<Typography fontSize={13}>30183.4 {priceSymbol}</Typography>
</Box>
<Box display=“flex” alignItems=“center” justifyContent=“space-between” mt={.12} sx={{backgroundColor: theme => theme.palette.grey[200], color: theme => theme.palette.text.secondary, pr: 0, pl: 1.5, py: 1.3, borderRadius: “0 0 8px 8px”}} >
<Typography color=“#999999” fontSize={13} className=“unselectable”>Сумма</Typography>
<FormControl sx={{fontSize: 13, “& svg”:{color: “#999999”}, " & .MuiSelect-select": {p: 0}, “& fieldset”: {border: “none”}, bgColor: theme => theme.palette.text.secondary}}>
<Select sx={{fontSize: 13}} onChange={(e) => setPriceSymbol(e.target.value)} value={priceSymbol}>
<MenuItem sx={{fontSize: 13}} value=“USDT”>USDT</MenuItem>
<MenuItem sx={{fontSize: 13}} value=“BUSDT”>BUSDT</MenuItem>
</Select>
</FormControl>
</Box>
</>
}
<Grid mt={.3} ml={.6} mr={1.5} height={30} >
<StyledSlider
value={price}
min={min}
max={max}
marks={marks}
onChange={(e, value) => setPrice(value as number)}
/>
</Grid>
<Box>
<Stack display=“flex” mb={.6}>
<Box display=“flex” onClick={() => setShowTPSL(prev => !prev)} mt={.3} className=“add_removed” >
<AddCircleIcon sx={{fontSize: 17, “& path”: {fill: “#999999”}, fill:“#eeeeee”}} width={88} />
<Typography ml={.5} fontSize={11} color=“#999999” className=“unselectable”>TP/SL</Typography>
</Box>
{
showTPSL && <>
<Box display=“flex” alignItems=“center” justifyContent=“space-between” mt={.12} sx={{backgroundColor: “#eeeeee”, color: “#191919”, pr: 0, pl: 1.5, py: 1.3, borderRadius: “8px 8px 0 0”}} >
<Typography color=“#999999” fontSize={13} className=“unselectable” fontWeight={400}>TP</Typography>
<FormControl sx={{fontSize: 13, “& svg”:{color: “#999999”}, " & .MuiSelect-select": {py: 0, px: 0}, “& fieldset”: {border: “none”}}} style={{backgroundColor: “#eeeeee”, color: “#191919”}}>
<Select sx={{fontSize: 13}} value=“Марк”>
<MenuItem sx={{fontSize: 13}} value=“Марк”>Марк</MenuItem>
<MenuItem sx={{fontSize: 13}} value=“USDT”>USDT</MenuItem>
<MenuItem sx={{fontSize: 13}} value=“BUSDT”>BUSDT</MenuItem>
</Select>
</FormControl>
</Box>
<Box display=“flex” alignItems=“center” justifyContent=“space-between” mt={.12} sx={{backgroundColor: theme => theme.palette.grey[200], color: theme => theme.palette.text.secondary,pr: 0, pl: 1.5, py: 1.3, borderRadius: “0 0 8px 8px”}} >
<Typography color=“#999999” fontSize={13} className=“unselectable”>SL</Typography>
<FormControl sx={{fontSize: 13, “& svg”:{color: “#999999”}, " & .MuiSelect-select": {py: 0, px: 0}, “& fieldset”: {border: “none”}, color: theme => theme.palette.text.secondary}}>
<Select sx={{fontSize: 13}} value=“Марк”>
<MenuItem sx={{fontSize: 13}} value=“Марк”>Марк</MenuItem>
<MenuItem sx={{fontSize: 13}} value=“BUSDT”>BUSDT</MenuItem>
</Select>
</FormControl>
</Box>
</>
}
</Stack>

<Button variant=“contained” color=“discordInvite” sx={{
height: 52,
px: 1,
fontSize: 11,
backgroundColor: orderSide === “buy” ? “#006943” : “#B41C18”,
color: “#fff”,
verticalAlign: “middle”,
width: “100%”,
}}>
{orderSide === “buy” ? “Купить” : “Продать”} 
<Typography mt={-.8} lineHeight={“52px”}>.</Typography> {price} {symbol}
</Button>
<Grid mt={.5} display=“flex” justifyContent=“space-between” >
<Typography fontSize={11} color=“#999999”>Доступно</Typography>
<Typography fontSize={11} >{FormatPrice({amount: min, currency_iso_code: “USD”, dec: “decimal”})} USDT</Typography>
</Grid>
<Grid mt={-.5} display=“flex” justifyContent=“space-between” >
<Typography fontSize={11} color=“#999999”>Макс</Typography>
<Typography fontSize={11}>{FormatPrice({amount: max, currency_iso_code: “USD”, dec: “decimal”})} USDT</Typography>
</Grid>
</Box>
</Stack>
</Box>);
};

export default AssetsBuySell;


ползунок не перетаскивается если мышкрй двигать. посмотри и пойми почему не работает кога я тяну ползунок, работает только по клику