import { Typography, Box, useTheme, InputBase, useMediaQuery, IconButton, FormControl, InputAdornment } from "@mui/material";
import { useState } from "react";
import CustomButton from "../../components/CustomButton";
import SectionWrapper from "../../components/SectionWrapper";
import Message from "./Message";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import SendIcon from "@mui/icons-material/Send";


export default function Support() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const [messageText, setMessageText] = useState<string>("");

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                pt: upMd ? "25px" : "20px",
                pb: upMd ? "70px" : "18px",
                height: "100%",
                display: "flex",
                flexDirection: "column",
            }}
            outerContainerSx={{
                height: upMd ? undefined : "calc(100vh - 51px)",
            }}
        >
            {upMd &&
                <Typography
                    sx={{
                        fontWeight: 400,
                        fontSize: "12px",
                        lineHeight: "14px",
                        color: theme.palette.grey2.main,
                        mb: "20px",
                    }}
                >
                    {`Все тарифы — `}
                    <Typography
                        component="span"
                        sx={{
                            fontWeight: 400,
                            fontSize: "12px",
                            lineHeight: "14px",
                            color: theme.palette.fadePurple.main,
                            textUnderlinePosition: "under",
                            textDecorationColor: theme.palette.brightPurple.main,
                        }}
                    >Запрос в службу техподдержки</Typography>
                </Typography>
            }
            <Box
                sx={{
                    mb: "40px",
                    display: "flex",
                    gap: "10px",
                }}
            >
                {!upMd &&
                    <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
                        <ArrowBackIcon />
                    </IconButton>
                }
                <Typography variant="h4">Запрос в службу техподдержки</Typography>
            </Box>
            <Box
                sx={{
                    backgroundColor: upMd ? "white" : undefined,
                    display: "flex",
                    flexGrow: 1,
                    maxHeight: upMd ? "443px" : undefined,
                    borderRadius: "12px",
                    p: upMd ? "20px" : undefined,
                    gap: "40px",
                    boxShadow: upMd ?
                        `0px 100px 309px rgba(210, 208, 225, 0.24), 
                        0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
                        0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
                        0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 
                        0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
                        0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`
                        :
                        undefined,
                }}
            >
                <Box
                    sx={{
                        display: "flex",
                        alignItems: "start",
                        flexDirection: "column",
                        flexGrow: 1,
                    }}
                >
                    <Typography variant={upMd ? "h5" : "body2"} mb={"4px"}>Заголовок</Typography>
                    <Typography sx={{
                        fontWeight: 400,
                        fontSize: "14px",
                        lineHeight: "17px",
                        color: theme.palette.grey2.main,
                        mb: upMd ? "9px" : "20px",
                    }}>Создан: 15.09.22 08:39</Typography>
                    <Box
                        sx={{
                            backgroundColor: "#ECECF3",
                            border: `1px solid ${theme.palette.grey2.main}`,
                            borderRadius: "10px",
                            overflow: "hidden",
                            width: "100%",
                            minHeight: "345px",
                            display: "flex",
                            flexGrow: 1,
                            flexDirection: "column",

                        }}
                    >
                        <Box
                            sx={{
                                flexGrow: 1,
                                width: "100%",
                                borderBottom: `1px solid ${theme.palette.grey2.main}`,
                                px: upMd ? "20px" : "5px",
                                py: upMd ? "20px" : "13px",
                                display: "flex",
                                flexDirection: "column",
                                gap: upMd ? "20px" : "16px",
                                overflow: "auto",
                                height: "200px",
                            }}
                        >
                            <Message
                                text="Текст-заполнитель — это текст, который имеет "
                                time="16:40"
                                isSelf={false}
                            />
                            <Message
                                text="Текст-заполнитель — это текст, который имеет "
                                time="16:40"
                                isSelf={true}
                            />
                            <Message
                                text="Текст-заполнитель — это текст"
                                time="16:40"
                                isSelf={false}
                            />
                        </Box>
                        <FormControl>
                            <InputBase
                                value={messageText}
                                fullWidth
                                placeholder="Текст обращения"
                                id="message"
                                multiline
                                sx={{
                                    width: "100%",
                                    p: 0,
                                }}
                                inputProps={{
                                    sx: {
                                        fontWeight: 400,
                                        fontSize: "16px",
                                        lineHeight: "19px",
                                        pt: upMd ? "13px" : "28px",
                                        pb: upMd ? "13px" : "24px",
                                        px: "19px",
                                        maxHeight: "calc(19px * 5)",
                                    }
                                }}
                                onChange={e => setMessageText(e.target.value)}
                                endAdornment={!upMd &&
                                    <InputAdornment position="end">
                                        <IconButton
                                            sx={{
                                                height: "45px",
                                                width: "45px",
                                                mr: "13px",
                                            }}
                                        >
                                            <SendIcon />
                                        </IconButton>
                                    </InputAdornment>
                                }
                            />
                        </FormControl>
                    </Box>
                </Box>
                {upMd &&
                    <Box sx={{ alignSelf: "end" }}>
                        <CustomButton
                            variant="contained"
                            sx={{
                                backgroundColor: theme.palette.brightPurple.main,
                            }}
                        >Отправить</CustomButton>
                    </Box>
                }
            </Box>
        </SectionWrapper >
    );
}