import * as React from "react";
import { useLinkClickHandler  } from "react-router-dom";
import { Box, Modal, Fade, Backdrop, Typography } from "@mui/material";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import theme from "../../../theme";

export interface MWProps {
  open: boolean
}

const ModalUser = ({open}: MWProps ) =>  {
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };
  
  return (
    <React.Fragment>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={ open }
      onClose={ useLinkClickHandler('/users') }
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Box sx={{
            position: "absolute" as "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            width: "30%",
            height: "30%",
            bgcolor: theme.palette.menu.main,
            boxShadow: 24,
            color: theme.palette.secondary.main,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}>
            <Typography id="transition-modal-title" variant="caption">
              Пользователь сервиса
            </Typography>

            <Box sx={{
              width: "100%",
              marginTop: "50px",
              display: "flex"
            }}>
              
              <Tabs
                orientation="vertical"
                variant="scrollable"
                value={value}
                onChange={handleChange}
                aria-label="Vertical tabs example"
                sx={{ 
                  borderRight: 1, 
                  borderColor: theme.palette.secondary.main,
                  "& .MuiTab-root.Mui-selected": {
                    color: theme.palette.secondary.main
                  }
                }}
                TabIndicatorProps={{style: {
                  background: theme.palette.secondary.main
                }}}
              >
                <Tab sx={{ 
                  color: theme.palette.grayDisabled.main,
                  width: "180px",
                  fontSize: "15px"
                }} 
                label="Пользовательская информация" />
                <Tab sx={{ 
                  color: theme.palette.grayDisabled.main,
                  width: "180px",
                  fontSize: "15px"
                }}  
                label="История транзакций" />
              </Tabs>
              
              { value == 0 && (
                <Box sx={{ marginLeft: "20px" }}>
                  <Typography>Id: 1</Typography>
                  <Typography>Email: 2</Typography>
                  <Typography>Номер телефона: 3</Typography>
                </Box>
              ) }

              { value == 1 && (
                <Box sx={{ marginLeft: "20px" }}>
                  <Typography>Дата/время</Typography>
                  <Typography>Сумма</Typography>
                  <Typography>Id long</Typography>
                  <Typography>Статус платежа</Typography>
                </Box>
              ) }

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


export default ModalUser;