/* ---------------------------------- @mui ---------------------------------- */
import { styled } from '@mui/material/styles';
import {
  Paper,
  Table as TableContent,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Button,
  TableSortLabel,
  Box,
  Card,
  Grid,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  SelectChangeEvent,
  Stack,
  Typography,
  LinearProgress,
  linearProgressClasses,
  InputAdornment,
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';
/* ---------------------------------- axios --------------------------------- */
import axios from '../utils/axios';
/* ---------------------------------- react --------------------------------- */
import { Fragment, useContext, useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
/* -------------------------------- component ------------------------------- */
import BaseTablePagination from './BaseTablePagination';
/* ---------------------------------- theme --------------------------------- */
import palette from '../theme/palette';
/* ---------------------------------- utils --------------------------------- */
import { UserCurrentCorporateContext } from '../contexts/UserCurrentCorporate';
import { fSplit } from '../utils/formatNumber';
/* ---------------------------------- types --------------------------------- */
import { DivisionDataProps, Order, PaginationTableProps, TableListProps } from '../@types/table';
/* ----------------------------------- icon --------------------------------- */
import SearchIcon from '@mui/icons-material/Search';
import { FormControlLabel } from '@mui/material';
import { Checkbox } from '@mui/material';
import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
import { LoadingButton } from '@mui/lab';

/* --------------------------------- styled --------------------------------- */
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  height: 10,
  borderRadius: 6,
  [`&.${linearProgressClasses.colorPrimary}`]: {
    backgroundColor: '#D1F1F1',
  },
  [`& .${linearProgressClasses.bar}`]: {
    borderRadius: 6,
    backgroundColor: '#54D62C',
  },
}));
/* -------------------------------------------------------------------------- */

export default function Table<T>({
  rows,
  loadings,
  params,
  searchs,
}: TableListProps<T>) {
  

  /* ------------------------------ handle checkbox ----------------------------*/
  const handleCheckboxChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    // Anda bisa menambahkan logika di sini
    if (event.target.checked) {
      // Checkbox dicentang
      console.log('Checkbox dicentang');
      // Tambahkan kode lain yang ingin Anda jalankan saat checkbox dicentang
    } else {
      // Checkbox tidak dicentang
      console.log('Checkbox tidak dicentang');
      // Tambahkan kode lain yang ingin Anda jalankan saat checkbox tidak dicentang
    }
  };


  return (
    // <Card>
      <Grid container>
        {/* Field 1 */}
        <Grid item xs={12} paddingX="10px" paddingY="20px">
            {searchs && searchs.useSearchs ? (
              <Fragment>
                <Grid item xs={12} lg={12} xl={12}>
                  <form onSubmit={searchs.handleSearchSubmit}>
                    <TextField
                      id="search-input"
                      variant="outlined"
                      onChange={(event) => searchs.setSearchText(event.target.value)}
                      value={searchs.searchText}
                      fullWidth
                      placeholder='Search Name or Member ID... '
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <SearchIcon />
                          </InputAdornment>
                        ),
                      }}
                      
                    />
                  </form>
                </Grid>
              </Fragment>
            ) : null }
        </Grid>
        {/* End Field 1 */}

        {/* Field 2 */}
            
        <Grid item xs={12} paddingX="10px" paddingY="10px">
          <Card>
            <Fragment>
              <Stack direction='row' alignItems='center'>
                <Grid item xs={1} lg={1} xl={1} >
                  <form onSubmit={searchs.handleSearchSubmit}>
                    <FormControlLabel
                      value="end"
                      control={<Checkbox />}
                      label=""
                      labelPlacement="end"
                      sx={{marginLeft: '20px'}}
                    />
                  </form>
                </Grid>
                <div style={{ position: 'relative', flex: 'none', height: 'fit-content', margin: '15px'}}>
                  <img
                    width={52}
                    height={52}
                    src="/images/user-profile.png"
                    alt="user-profile"
                    style={{ borderRadius: '50%' }}
                  />
                </div>
                <Grid item xs={7} lg={7} xl={7} >
                  <Typography variant='subtitle1'>Alexandra Rhea Putranto</Typography>
                  <Typography color={'#637381'}>KM002-01</Typography>
                </Grid>
                <Grid item xs={3} lg={3} xl={3} >
                    <BorderLinearProgress
                      variant="determinate"
                      value={80}
                      // color='success'
                      sx={{ mb: 1 }}
                    />
                    <Stack direction={'row'}>
                      <Grid item xs={3}>
                        <Typography variant='overline' sx={{textAlign:'left'}}>
                          LIMIT
                        </Typography>
                      </Grid>
                      <Grid item xs={7} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                        <Stack direction={'row'}>
                          <Typography variant='overline'>
                          {fSplit(8000000)}
                          </Typography>
                          <Typography variant='overline'>
                          / {fSplit(10000000000)}
                          </Typography>
                        </Stack>
                      </Grid>
                    </Stack>
                </Grid>
                <Grid item xs={2} lg={2} xl={2} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                  <Stack direction={'row'}>
                    <HistoryRoundedIcon/>
                    <KeyboardArrowRightRoundedIcon
                        sx={{marginLeft: '30px'}}
                    />
                    
                  </Stack>
                </Grid>
                {/* <Grid item xs={1} lg={1} xl={1} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <ArrowForwardIosRoundedIcon></ArrowForwardIosRoundedIcon>
                </Grid> */}

              </Stack>
            </Fragment>
          </Card>
        </Grid>
        <Grid item xs={12} paddingX="10px" paddingY="10px">
          <Card>
            <Fragment>
              <Stack direction='row' alignItems='center'>
                <Grid item xs={1} lg={1} xl={1} >
                  <form onSubmit={searchs.handleSearchSubmit}>
                    <FormControlLabel
                      value="end"
                      control={<Checkbox />}
                      label=""
                      labelPlacement="end"
                      sx={{marginLeft: '20px'}}
                    />
                  </form>
                </Grid>
                <div style={{ position: 'relative', flex: 'none', height: 'fit-content', margin: '15px'}}>
                  <img
                    width={52}
                    height={52}
                    src="/images/user-profile.png"
                    alt="user-profile"
                    style={{ borderRadius: '50%' }}
                  />
                </div>
                <Grid item xs={7} lg={7} xl={7} >
                  <Typography variant='subtitle1'>Alexandra Rhea Putranto</Typography>
                  <Typography color={'#637381'}>KM002-01</Typography>
                </Grid>
                <Grid item xs={3} lg={3} xl={3} >
                    <BorderLinearProgress
                      variant="determinate"
                      value={80}
                      // color='success'
                      sx={{ mb: 1 }}
                    />
                    <Stack direction={'row'}>
                      <Grid item xs={5}>
                        <Typography variant='overline' sx={{textAlign:'left'}}>
                          LIMIT
                        </Typography>
                      </Grid>
                      <Grid item xs={7}>
                        <Stack direction={'row'}>
                          <Typography variant='overline'  style={{ textAlign: 'right' }}>
                          {fSplit(8000000)}
                          </Typography>
                          <Typography variant='overline' style={{ textAlign: 'right' }}>
                          / {fSplit(10000000000)}
                          </Typography>
                        </Stack>
                      </Grid>
                    </Stack>
                </Grid>
                <Grid item xs={2} lg={2} xl={2} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                  <Stack direction={'row'}>
                    <HistoryRoundedIcon/>
                    <KeyboardArrowRightRoundedIcon
                        sx={{marginLeft: '30px'}}
                    />
                    
                  </Stack>
                </Grid>
                {/* <Grid item xs={1} lg={1} xl={1} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <ArrowForwardIosRoundedIcon></ArrowForwardIosRoundedIcon>
                </Grid> */}

              </Stack>
            </Fragment>
          </Card>
        </Grid>
        {/* End Field 2 */}
        <LoadingButton
        variant="contained"
        sx={{ marginTop: 2, p: 2, margin: '10px', color:'#212B36', backgroundColor:'#DFE3E8' }}
        fullWidth
       
      >
        Claim Submit Selected
      </LoadingButton>
      </Grid>
    // </Card>
  );
}