/* eslint-disable react/no-array-index-key */
/* eslint-disable react/jsx-key */
/* eslint no-underscore-dangle: ["error", { "allow": [ "_id"] }] */
import React, { useEffect, useState } from 'react';
import Box from '@mui/material/Box';
import { DataGrid, GridActionsCellItem, GridToolbarQuickFilter } from '@mui/x-data-grid';
import { useNavigate } from 'react-router-dom';
import {
  Autocomplete,
  Stack,
  Typography,
  Card,
  Chip,
  CardContent,
  TextField,
  Grid,
  InputAdornment,
  IconButton
} from '@mui/material';
import { useDispatch, useSelector } from 'react-redux';
import dateFormat from 'dateformat';
import DatePicker from 'react-datepicker';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import 'react-datepicker/dist/react-datepicker.css';
import LoadingSkeleton from '../../utils/LoadingSkeleton';
import NoRowsOverlay from '../../utils/NoRowOverlay';
import PaymentAction from '../../store/actions/PaymentAction';
import CopyInput from '../../components/CopyInput';

function QuickSearchToolbar() {
  return (
    <Box
      className="tableTopWrap page__title"
      sx={{
        borderBottom: '1px solid rgba(0,0,0,0.1)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        p: 3
      }}
    >
      <Stack direction="row" sx={{ ml: 'auto' }} spacing={2} className="MuiDataGrid-Search">
        <GridToolbarQuickFilter
          quickFilterParser={(searchInput) => searchInput.split(',').map((value) => value.trim())}
          quickFilterFormatter={(quickFilterValues) => quickFilterValues.join(', ')}
          debounceMs={800} // time before applying the new quick filter value
          variant="outlined"
          size="small"
          sx={{ pb: 0, maxWidth: '275px' }}
        />
      </Stack>
    </Box>
  );
}

export default function TransactionInApp() {
  const [paginationModel, setPaginationModel] = useState({
    page: 0,
    pageSize: 10
  });

  const [sortInfo, setSortInfo] = useState({
    sortField: '',
    sort: ''
  });
  const navigate = useNavigate();
  const [rowCountState, setRowCountState] = useState(0);
  const [data, setData] = useState([]);
  const [status, setStatus] = useState('');
  const [paymentMethod, setPaymentMethod] = useState('');
  const [paymentType, setPaymentType] = useState('');
  const [searchWord, setSearchWord] = useState('');
  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;
  const dispatch = useDispatch();

  const { transactionData, isLoading, transactionStatus } = useSelector((state) => state.payment);

  useEffect(() => {
    const rangeDate = {
      dateStart: startDate,
      dateEnd: endDate
    };
    dispatch(
      PaymentAction.getAllTransaction(
        paginationModel,
        sortInfo,
        paymentMethod,
        paymentType,
        status,
        searchWord,
        rangeDate
      )
    );
  }, [
    dispatch,
    paginationModel,
    sortInfo,
    paymentMethod,
    paymentType,
    status,
    searchWord,
    startDate,
    endDate
  ]);

  useEffect(() => {
    dispatch(PaymentAction.getTransactionStatus());
    // dispatch(PaymentAction.getPaymentType());
    // dispatch(PaymentAction.getPaymentMethod());
  }, [dispatch]);

  useEffect(() => {
    if (transactionData) {
      if (transactionData.data) {
        setData(transactionData.data);
      } else {
        setData([]);
      }
      setRowCountState((prevRowCountState) =>
        transactionData.total !== undefined ? transactionData.total : prevRowCountState
      );
    }
  }, [transactionData]);

  const columns = [
    {
      field: 'unique_id',
      headerName: '',
      sortable: false,
      align: 'left',
      // flex: 0.3,
      width: 70,
      renderCell: (params) => {
        if (params && params.value) {
          return <CopyInput id={params.value} />;
        }
        return null;
      }
    },
    {
      field: 'name',
      headerName: 'Client Name',
      // flex: 0.75
      width: 200
    },
    {
      field: 'invoice_number',
      headerName: 'Invoice No',
      // flex: 0.75
      width: 140
    },
    {
      field: 'type',
      headerName: 'Payment Type',
      // flex: 0.75
      width: 160
    },
    {
      field: '_created_at',
      headerName: 'Invoice Paid Date',
      // flex: 1,
      width: 220,
      renderCell: (params) => {
        if (params && params.value) {
          return (
            <Typography component="p" variant="body1">
              {params.value}
            </Typography>
          );
        }
        return (
          <Typography component="p" variant="body1">
            -
          </Typography>
        );
      }
    },
    {
      field: 'amount',
      headerName: 'Paid Total',
      // flex: 0.75,
      width: 180,
      renderCell: (params) => {
        if ((params && params.value) || (params.row && params.row.symbol)) {
          return (
            <Typography component="p" variant="body1">
              {`${params.row.short_name} ${params.value}`}
            </Typography>
          );
        }
        return null;
      }
    },
    {
      field: 'transaction_id',
      headerName: 'Transaction ID',
      // flex: 1.25,
      width: 180
      // renderCell: (params) => {
      //   if (params && params.value) {
      //     return (
      //       <Typography title={params.value} component="p" variant="body1" noWrap>
      //         {params.value}
      //       </Typography>
      //     );
      //   }
      //   return null;
      // }
    },
    {
      field: 'payment_gateway',
      headerName: 'Payment Method',
      // flex: 1,
      width: 180,
      renderCell: (params) => {
        if (params && params.value) {
          return (
            <Typography
              title={params.value}
              noWrap
              component="p"
              variant="body1"
              sx={{ textTransform: 'capitalize' }}
            >
              {params.value}
            </Typography>
          );
        }
        return null;
      }
    },
    {
      field: 'status',
      headerName: 'Transaction Status',
      // flex: 0.75,
      width: 140,
      renderCell: (params) => {
        if (params && params.value) {
          return (
            <Chip label={params.value} color={params.value.toLowerCase().replace(/\s+/g, '')} />
          );
        }
        return null;
      }
    },
    {
      field: 'actions',
      type: 'actions',
      headerName: 'Actions',
      // flex: 1,
      width: 100,
      getActions: (params) => [
        <GridActionsCellItem
          icon={<i className="icon-view" />}
          className="actionBtn"
          label="View"
          title="View"
          onClick={() => {
            navigate(`/transaction/in-app/view/${params.id}`);
          }}
        />
      ]
    }
  ];
  const handleRangePicker = (date) => {
    if (!date || date.length !== 2 || date[1] === null) {
      return;
    }
    const formatDate = (newdate) => {
      return dateFormat(newdate, 'yyyy-mm-dd');
    };
    setDateRange(date.map(formatDate));
  };
  const handleSortModelChange = React.useCallback((sortModel) => {
    // Here you save the data you need from the sort model
    if (sortModel.length > 0) {
      const { field, sort } = sortModel[0];
      const sortData = {
        sortField: field,
        sort
      };
      setSortInfo(sortData);
    } else {
      dispatch(
        PaymentAction.getAllTransaction(
          paginationModel,
          sortInfo,
          paymentMethod,
          paymentType,
          status,
          searchWord
        )
      );
    }
    // eslint-disable-next-line
  }, []);

  const onFilterChange = React.useCallback((filterModel) => {
    // Here you save the data you need from the filter model
    const keyword = filterModel.quickFilterValues[0];
    setSearchWord(keyword);
    setPaginationModel({ page: 0, pageSize: 10 });
    // dispatch(
    //   PaymentAction.getAllTransaction(
    //     paginationModel,
    //     sortInfo,
    //     paymentMethod,
    //     paymentType,
    //     status,
    //     keyword
    //   )
    // );
    // eslint-disable-next-line
  }, []);

  return (
    <Box sx={{ mb: 3 }} className="cardWrapper">
      <Card className="pageTitleWrap" sx={{ mb: 3 }}>
        <CardContent>
          <Grid container columnSpacing={3}>
            <Grid item md={3} lg={3}>
              <Autocomplete
                className="filter"
                fullWidth
                size="small"
                options={transactionStatus?.payment_method ?? []}
                onChange={(e, newvalue) => {
                  if (newvalue) {
                    setPaymentMethod(newvalue);
                  } else {
                    setPaymentMethod('');
                  }
                  setPaginationModel({ page: 0, pageSize: 10 });
                }}
                sx={{ mt: 0 }}
                getOptionLabel={(option) => option}
                renderOption={(props, option) => {
                  return (
                    <li {...props} key={option}>
                      {option}
                    </li>
                  );
                }}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    label="Payment Method"
                    placeholder="Search Method"
                    variant="outlined"
                    margin="none"
                  />
                )}
              />
            </Grid>
            <Grid item md={3} lg={3}>
              <Autocomplete
                className="filter"
                fullWidth
                size="small"
                options={transactionStatus?.payment_type ?? []}
                onChange={(e, newvalue) => {
                  if (newvalue) {
                    setPaymentType(newvalue);
                  } else {
                    setPaymentType('');
                  }
                  setPaginationModel({ page: 0, pageSize: 10 });
                }}
                sx={{ mt: 0 }}
                getOptionLabel={(option) => option}
                renderOption={(props, option) => {
                  return (
                    <li {...props} key={option}>
                      {option}
                    </li>
                  );
                }}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    label="Payment Type"
                    placeholder="Search Type"
                    variant="outlined"
                    margin="none"
                  />
                )}
              />
            </Grid>
            <Grid item md={3} lg={3}>
              <Box className="datepicker">
                <DatePicker
                  selectsRange
                  startDate={startDate}
                  endDate={endDate}
                  onChange={(update) => {
                    setDateRange(update);
                    handleRangePicker(update);
                    setPaginationModel({ page: 0, pageSize: 10 });
                  }}
                  monthsShown={2}
                  isClearable
                  customInput={
                    <TextField
                      label="Date"
                      fullWidth
                      size="small"
                      InputProps={{
                        endAdornment: (
                          <InputAdornment position="start">
                            <IconButton
                              aria-label="toggle password visibility"
                              edge="end"
                              disabled
                              // color="secondary"
                            >
                              <CalendarMonthIcon sx={{ color: '#fff' }} />
                            </IconButton>
                          </InputAdornment>
                        )
                      }}
                    />
                  }
                />
              </Box>
            </Grid>
            <Grid item md={3} lg={3}>
              <Autocomplete
                className="status"
                fullWidth
                size="small"
                options={transactionStatus?.status ?? []}
                onChange={(e, newvalue) => {
                  if (newvalue && newvalue?.status) {
                    setStatus(newvalue.status);
                  } else {
                    setStatus('');
                  }
                  setPaginationModel({ page: 0, pageSize: 10 });
                }}
                sx={{ mt: 0 }}
                getOptionLabel={(option) => option.status}
                renderOption={(props, option) => {
                  return (
                    <li {...props} key={option.id}>
                      {option.status}
                    </li>
                  );
                }}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    label="Payment Status"
                    placeholder="Search Status"
                    variant="outlined"
                    margin="none"
                  />
                )}
              />
            </Grid>
          </Grid>
        </CardContent>
      </Card>
      <Box sx={{ bgcolor: 'white' }} className="dataTable__wrap">
        <DataGrid
          rows={data}
          getRowId={(row) => row._id}
          rowCount={rowCountState}
          columns={columns}
          initialState={{
            pagination: {
              paginationModel: {
                pageSize: 10
              }
            }
          }}
          autoHeight
          sx={{ minHeight: 650, '--DataGrid-overlayHeight': '50vh' }}
          disableColumnFilter
          rowHeight={50}
          slots={{
            toolbar: QuickSearchToolbar,
            loadingOverlay: LoadingSkeleton,
            noRowsOverlay: NoRowsOverlay
          }}
          pageSizeOptions={[10, 25, 50, 100]}
          paginationModel={paginationModel}
          paginationMode="server"
          onPaginationModelChange={setPaginationModel}
          sortingMode="server"
          onSortModelChange={handleSortModelChange}
          filterMode="server"
          onFilterModelChange={onFilterChange}
          disableRowSelectionOnClick
          loading={isLoading}
        />
      </Box>
    </Box>
  );
}