import * as React from "react";
import { Box, Button } from "@mui/material";
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
import CircleIcon from '@mui/icons-material/Circle';
import theme from "../../theme";
import { green } from '@mui/material/colors';
import Pagination from "../Pagination";


const Users: React.FC = () =>  {
  return (
    <React.Fragment>
      <Box sx={{
        width: "100%",
        display: "flex",
        justifyContent: "space-between"
      }}>
        <Box sx={{
          border: "1px solid",
          borderColor: theme.palette.grayDark.main,
          width: "53%",
          height: "100%",
          borderRadius: "3px"
        }}></Box>

        <Box sx={{
          width: "max(40%, 460px)",
          height: "540px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "center",
        }}>
          <Box sx={{
            width: "100%",
            border: "1px solid",
            borderColor: theme.palette.grayDark.main,
            borderRadius: "3px",
            padding: "10px"
          }}>
            <Button 
              variant = "contained"
              sx={{
                backgroundColor: theme.palette.grayDark.main,
                width: "100%",
                height: "45px",
                fontSize: "15px",
                fontWeight: "normal",
                textTransform: "capitalize",
                "&:hover": {
                  backgroundColor: theme.palette.menu.main
                }
              }}>
                Поиск
                <SearchOutlinedIcon />
            </Button>
            <Button 
              variant = "text"
              sx={{
                width: "100%",
                height: "35px",
                fontSize: "14px",
                fontWeight: "normal",
                color: theme.palette.secondary.main,
                border: "1px solid",
                borderColor: theme.palette.golden.main,
                borderRadius: 0,
                "&:hover": {
                  backgroundColor: theme.palette.menu.main
                }
              }}>
                ЗАКРЫТЬ ТИКЕТ 
                <HighlightOffOutlinedIcon />
            </Button>
          </Box>

          <Box sx={{
            width: "100%",
            height: "350px",
            border: "1px solid",
            borderColor: theme.palette.grayDark.main,
            borderRadius: "3px",
            overflow: "auto",
            overflowY: "auto",
            padding: "10px"
          }}>

            <Box sx={{
              minHeight: "70px",
              display: "flex",
              justifyContent: "space-between"
            }}>
              <Box sx={{
                width: "150px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                10.09.2022
              </Box>
              <Box sx={{
                width: "100%",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                ДЕНЬГИ НЕ ПРИШЛИ
              </Box>
              <Box sx={{
                width: "30px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                <CircleIcon sx={{
                  color: green[ 700 ],
                  transform: "scale(0.8)"
                }} />
              </Box>
              <Box sx={{
                width: "150px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                ИНФО
              </Box>
            </Box>

            <Box sx={{
              minHeight: "70px",
              display: "flex",
              justifyContent: "space-between",
              border: "1px solid",
              borderColor: theme.palette.golden.main,
              backgroundColor: theme.palette.goldenMedium.main
            }}>
              <Box sx={{
                width: "150px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                09.09.2022
              </Box>
              <Box sx={{
                width: "100%",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                ВЫВОД
              </Box>
              <Box sx={{
                width: "30px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                <CircleIcon sx={{
                  color: green[ 700 ],
                  transform: "scale(0.8)"
                }} />
              </Box>
              <Box sx={{
                width: "150px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                ИНФО
              </Box>
            </Box>

            <Box sx={{
              minHeight: "70px",
              display: "flex",
              justifyContent: "space-between",
              border: "1px solid",
              borderColor: theme.palette.golden.main,
              backgroundColor: theme.palette.goldenMedium.main
            }}>
              <Box sx={{
                width: "150px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                09.09.2022
              </Box>
              <Box sx={{
                width: "100%",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                ЗДРАВСТВУЙТЕ, МОЖНО ЛИ ОПЛАТИТЬ ЛИЦОМ НЕ ДОСТИГШИМ 18 ЛЕТ, ОПЛАТИТЬ 300 РУБЛЕЙ ЧЕРЕЗ КИВИ
              </Box>
              <Box sx={{
                width: "30px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                <CircleIcon sx={{
                  color: green[ 700 ],
                  transform: "scale(0.8)"
                }} />
              </Box>
              <Box sx={{
                width: "150px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                ИНФО
              </Box>
            </Box>

            <Box sx={{
              minHeight: "70px",
              display: "flex",
              justifyContent: "space-between"
            }}>
              <Box sx={{
                width: "150px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                07.09.2022
              </Box>
              <Box sx={{
                width: "100%",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                ПРОБЛЕМЫ С ВЫВОДОМ
              </Box>
              <Box sx={{
                width: "30px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                <CircleIcon sx={{
                  color: green[ 700 ],
                  transform: "scale(0.8)"
                }} />
              </Box>
              <Box sx={{
                width: "150px",
                padding: "10px",
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}>
                ИНФО
              </Box>
            </Box>

          </Box>

          <Pagination />

        </Box>
      </Box>
    </React.Fragment>
  );
}


export default Users;