import * as React from 'react';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import { Button } from '@mui/material';
import { Link } from 'react-router-dom';

const columns = [
  // { id: 'name', label: 'Name', minWidth: 170 },
  // { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
  {
    id: 'project_title',
    label: 'Title',
    minWidth: 170,
    align: 'right',
    // format: (value) => value.toLocaleString('en-US'),
  },
  {
    id: 'cms_contract_no',
    label: 'Contract No',
    minWidth: 170,
    align: 'right',
    // format: (value) => value.toLocaleString('en-US'),
  },
  {
    id: 'ticket_title',
    label: 'Project Title',
    minWidth: 170,
    align: 'right',
    // format: (value) => value.toFixed(2),
  },
  {
    id: 'term',
    label: 'Term',
    Cell: (row:any) => (
      (row.perpetuity !== '' && row.perpetuity !== null)
        ? (row.perpetuity !== "Yes" ? <span>{row.effective_from1} - {row.effective_to1}</span> : `${row.effective_from1} - Perpetual`)
        : ""
    ),
  },
  {
    id: 'link',
    label: 'Link',
    Cell: (row:any) => (
      (row.cid === null || row.cid === 0 || row.effective_from1 === null)
        ? <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained"  size="small">Link</Button>
        : (row.published === 1
          ? <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained" color="primary" size="small">View</Button>
          : <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained" color="primary" size="small">Publish</Button>
        )
    ),
    minWidth: 80,
    align: 'right',
  },
];

type Props={
  projectData:any
}


export default function ProjectList({projectData}:Props) {
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

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

  const handleChangeRowsPerPage = (event:any) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };


  return (
    <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
    <Paper  className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
      <TableContainer sx={{ maxHeight: '600px'}}>
        <Table stickyHeader aria-label="sticky table">
          <TableHead >
            <TableRow >
              {columns.map((column) => (
                <TableCell 
                  sx={{bgcolor:'#171716',color:'white', borderBottom:'#171716'}}
                  key={column.id}
                  // align={column.align}
                  style={{ minWidth: column.minWidth }}
                >
                  {column.label}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {projectData && projectData
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row:any) => {
                return (
                  <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
                    {columns.map((column:any) => {
                      const value = row[column.id];
                      return (
                        <TableCell key={column.id} 
                        // align={column.align}
                        >
                          {column.format && typeof value === 'number'
                            ? column.format(value)
                            : value}
                        </TableCell>
                      );
                    })}
                  </TableRow>
                );
              })}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        sx={{bgcolor:'#171716',color:'white'}}
        rowsPerPageOptions={[10, 25, 100]}
        component="div"
        count={projectData && projectData.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
    </Paper>
    </Paper>
  );
}