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 { DataGrid, GridColDef } from '@mui/x-data-grid';
import theme from "../../../theme";


export interface MWProps {
  open: boolean
}

const columns: GridColDef[] = [
  { 
    field: 'id', 
    headerName: 'ID', 
    width: 30,
    sortable: false,
  },
  {
    field: 'dateTime',
    headerName: 'Дата / время',
    width: 150,
    sortable: false,
  },
  {
    field: 'email',
    headerName: 'Почта',
    width: 110,
    sortable: false,
  },{
    field: 'summa',
    headerName: 'Сумма',
    type: 'number',
    width: 110,
    sortable: false,
  },
  {
    field: 'idLong',
    headerName: 'ID long',
    type: 'number',
    width: 110,
    sortable: false,
  },
  {
    field: 'paymentStatus',
    headerName: 'Статус платежа',
    width: 160,
    sortable: false,
  },
];

const rows = [
  { id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
  { id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
  { id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
  { id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
  { id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
];

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: "980px",
            height: "480px",
            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" }}>
                  <DataGrid
                    rows={rows}
                    columns={columns}
                    pageSize={5}
                    rowsPerPageOptions={[5]}
                    disableSelectionOnClick
                    experimentalFeatures={{ newEditingApi: true }}
                    sx={{
                      color: theme.palette.secondary.main,
                      width: "720px",
                      height: "350px",
                      overflowY: "auto",
                      "& .MuiDataGrid-iconSeparator": {
                        display: "none"
                      },
                      "& .css-levciy-MuiTablePagination-displayedRows": {
                        color: theme.palette.secondary.main
                       },
                       "& .MuiSvgIcon-root": {
                        color: theme.palette.secondary.main
                       }
                    }}
                  />
                </Box>
              ) }

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


export default ModalUser;