import React, { useState } from 'react'
import {
  Box,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  TablePagination,
  Button,
  IconButton,
  Tooltip,
} from '@mui/material'
import { Visibility, ThumbUp, ThumbDown } from '@mui/icons-material'
import { format } from 'date-fns'
import { useNavigate } from 'react-router-dom'

const generateRandomData = (numRows) => {
  const statuses = ['New', 'Pending', 'Rejected', 'Approved']
  const data = []

  for (let i = 0; i < numRows; i++) {
    data.push({
      id: i + 1,
      tradeName: `Trade ${i + 1}`,
      createdOn: new Date(),
      status: statuses[Math.floor(Math.random() * statuses.length)],
    })
  }

  return data
}

const Kyc = () => {
  const [rows, setRows] = useState(generateRandomData(50))
  const [page, setPage] = useState(0)
  const [rowsPerPage, setRowsPerPage] = useState(5)
  const navigate = useNavigate()

  const handleChangePage = (event, newPage) => {
    setPage(newPage)
  }

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10))
    setPage(0)
  }

  // const handleViewClick = (id) => {
  //   navigate(`/kyc/details/${id}`)
  // }

  return (
    <Box sx={{ width: '100%' }}>
      <Paper sx={{ width: '100%', mb: 2 }}>
        <TableContainer>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>ID</TableCell>
                <TableCell>Trade Name</TableCell>
                <TableCell>Created On</TableCell>
                <TableCell>Status</TableCell>
                <TableCell>Action</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => (
                <TableRow key={row.id}>
                  <TableCell>{row.id}</TableCell>
                  <TableCell>{row.tradeName}</TableCell>
                  <TableCell>{format(row.createdOn, 'yyyy-MM-dd HH:mm:ss')}</TableCell>
                  <TableCell>{row.status}</TableCell>
                  <TableCell>
                    <Tooltip title="View">
                      {/* <IconButton color="primary">
                        <Visibility />
                      </IconButton> */}
                      <Button
                        sx={{ mr: '1rem' }}
                        color="primary"
                        variant="contained"
                        // onClick={() => handleViewClick(row.id)}
                      >
                        View
                      </Button>
                    </Tooltip>
                    <Tooltip title="Approve">
                      {/* <IconButton color="success">
                        <ThumbUp />
                      </IconButton> */}
                      <Button sx={{ mr: '1rem' }} color="success" variant="contained">
                        Approve
                      </Button>
                    </Tooltip>
                    <Tooltip title="Reject">
                      {/* <IconButton color="error">
                        <ThumbDown />
                      </IconButton> */}
                      <Button sx={{ mr: '1rem' }} color="error" variant="contained">
                        Reject
                      </Button>
                    </Tooltip>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
        <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          component="div"
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
        />
      </Paper>
    </Box>
  )
}

export default Kyc