import React, { useEffect, useState ,useRef } from "react";
import axios from "axios";
import {
  Button,
  Dialog,
  Autocomplete,
  DialogActions,
  DialogContent,
  DialogTitle,
  Snackbar,
  Alert,
  Typography,
  TextField,
  Table,
  TableBody,
 Switch,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
 CardMedia,
  Card,
 LinearProgress,
Grid,
Container,
  TablePagination,
  Paper,
  IconButton,
  InputAdornment
} from "@mui/material";
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';

import FormGroup from '@mui/material/FormGroup';
import Checkbox from '@mui/material/Checkbox';

import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';

import Box from '@mui/material/Box';
import OutlinedInput from '@mui/material/OutlinedInput';
import Chip from '@mui/material/Chip';

import { makeStyles } from '@mui/styles';
import { QRCode } from "react-qrcode-logo";
import Barcode from "react-barcode";
 import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import ReCAPTCHA from 'react-google-recaptcha';
 import { getToken } from '../../../../utils/tokenService';import SearchIcon from '@mui/icons-material/Search';

const FILE_API_URL = `${process.env.REACT_APP_API_BASE_URL}/FileUpload/Uploadeddocs`;
const API_URL = `${process.env.REACT_APP_API_BASE_URL}/TestA/TestA`;
const token = localStorage.getItem("authToken");
// Custom styles using makeStyles
const useStyles = makeStyles((theme) => ({
  tableHeader: {
    backgroundColor: "#000000",
    color: "#ffffff",
  },
  searchContainer: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: theme.spacing(2),
  },
  searchInput: {
    marginRight: theme.spacing(2),
    flex: 1,
  },
  tableContainer: {
    marginTop: theme.spacing(2),
  },
  dialogContent: {
    display: 'flex',
    flexDirection: 'column',
    gap: theme.spacing(2),
  },
  formControl: {
    marginBottom: theme.spacing(2),
  },
  button: {
    margin: theme.spacing(1),
  },
}));




const EntityTable = () => {
  const classes = useStyles();
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);


  const [newEntity, setNewEntity] = useState({
    name: "",

  });
  const [editEntity, setEditEntity] = useState(null);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showAddModal, setShowAddModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [deleteEntityId, setDeleteEntityId] = useState(null);
  const [currentPage, setCurrentPage] = useState(0);
  const [itemsPerPage] = useState(5); // Adjust this value as needed
  const [searchQuery, setSearchQuery] = useState("");
  const [openSnackbar, setOpenSnackbar] = useState(false);
  const [snackbarMessage, setSnackbarMessage] = useState("");
  const [qrText, setQrText] = useState("");
  const [showQrCode, setShowQrCode] = useState(false); 
  const qrCodeRef = useRef();
  const [barcodeText, setBarcodeText] = useState(""); 
  const barcodeRef = useRef();
  const [showBarcode, setShowBarcode] = useState(false);
  const [captchaValue, setCaptchaValue] = useState(null);
  const [alertMessage, setAlertMessage] = useState("");
  const [showPaymentOptions, setShowPaymentOptions] = useState(false);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [serverData, setServerData] = useState([]);
  const [showValulistModal, setShowValulistModal] = useState(false);
  const [snackbarSeverity, setSnackbarSeverity] = useState("success");

  const handlePageChange = (event, newPage) => {
    setCurrentPage(newPage);
  };

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    handleSearch();
  }, [searchQuery, data]);

  const fetchData = async () => {
    try {
 const token = getToken();
      const response = await axios.get(API_URL, {
        headers: { Authorization: `Bearer ${token}` },
      });
      setData(response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  const handleDelete = async () => {
    try {
 const token = getToken();
      await axios.delete(`${API_URL}/${deleteEntityId}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      fetchData();
      setSnackbarMessage("Successfully deleted!");
      setSnackbarSeverity("success");
      setOpenSnackbar(true);
      setShowDeleteModal(false);
    } catch (error) {
      console.error("Error deleting data:", error);
      setSnackbarMessage("Failed to delete!");
      setSnackbarSeverity("error");
      setOpenSnackbar(true);
    }
  };

  const handleAdd = async () => {


    try {
 const token = getToken();
      await axios.post(API_URL, newEntity, {
        headers: { Authorization: `Bearer ${token}` },
      });
      fetchData();
      setNewEntity({
    name: "",

      });
      setShowAddModal(false);
      setSnackbarMessage("Successfully added!");
      setSnackbarSeverity("success");
      setOpenSnackbar(true);
    } catch (error) {
      console.error("Error adding data:", error);
      setSnackbarMessage("Failed to add!");
      setSnackbarSeverity("error");
      setOpenSnackbar(true);
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setNewEntity({ ...newEntity, [name]: value });


  };

  const handleChangeCheckbox = (e) => {
    const { name, value, checked } = e.target;
    setNewEntity({ ...newEntity, [value]: checked });
  };

const handleChangeSelectMulti = (e) => {
    const { name, value } = e.target;
    setNewEntity({ ...newEntity, [name]: String(value) });
  };

  const handleEditChange = (e) => {
    const { name, value } = e.target;
    setEditEntity({ ...editEntity, [name]: value });
  };

  const handleEdit = (entity) => {
    let requiredKeys = Object.keys(newEntity);
    let newObj = {};
    requiredKeys.forEach((key) => {
      newObj[key] = entity[key];
    });
    setEditEntity(entity);
    setNewEntity(newObj);
    setShowEditModal(true);
  };

  const handleUpdate = async () => {


    try {
 const token = getToken();
      await axios.put(`${API_URL}/${editEntity.id}`, newEntity, {
        headers: { Authorization: `Bearer ${token}` },
      });
      fetchData();
      setShowEditModal(false);
      setSnackbarMessage("Successfully updated!");
      setSnackbarSeverity("success");
      setOpenSnackbar(true);
    } catch (error) {
      console.error("Error updating data:", error);
      setSnackbarMessage("Failed to update!");
      setSnackbarSeverity("error");
      setOpenSnackbar(true);
    }
  };

  const handleSearch = () => {
    const filtered = data;
    setFilteredData(filtered);
 };



  return (
    <div className="container mt-5">
      <Typography variant="h4" gutterBottom>
        Entity Table
      </Typography>
      <div className={classes.searchContainer}>
        <Button
          variant="contained"
          color="primary"
          onClick={() => {
            let emptyNewEntity = {};
            Object.keys(newEntity).forEach((key) => {
              emptyNewEntity[key] =

 "";
            });
            setNewEntity(emptyNewEntity);
            setShowAddModal(true);
          }}
          className={classes.button}
        >
          Add Entity
        </Button>


        <TextField
          className={classes.searchInput}
          label="Search"
          variant="outlined"
          size="small"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <IconButton>
                  <SearchIcon />
                </IconButton>
              </InputAdornment>
            ),
          }}
        />
      </div>
      <TableContainer component={Paper} className={classes.tableContainer}>
        <Table>
          <TableHead>
            <TableRow >
  <th>name</th>

            </TableRow>
          </TableHead>
          <TableBody>
            {filteredData.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage).map((entity) => (
              <TableRow key={entity.id}>

              <td>{entity.name}</td>


                <TableCell>
                  <Button
                    variant="contained"
                    color="warning"
                    size="small"
                    className={classes.button}
                    onClick={() => handleEdit(entity)}
                  >
                    Update
                  </Button>
                  <Button
                    variant="contained"
                    color="error"
                    size="small"
                    className={classes.button}
                    onClick={() => {
                      setDeleteEntityId(entity.id);
                      setShowDeleteModal(true);
                    }}
                  >
                    Delete
                  </Button>


                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        rowsPerPageOptions={[5, 10, 25]}
        component="div"
        count={filteredData.length}
        rowsPerPage={itemsPerPage}
        page={currentPage}
        onPageChange={handlePageChange}
      />


      <Dialog open={showEditModal} onClose={() => setShowEditModal(false)}>
        <DialogTitle>Edit Entity</DialogTitle>
        <DialogContent className={classes.dialogContent}>


<TextField
          fullWidth
          margin="normal"
          label="Name"
          variant="outlined"
          name="name"
          value={newEntity.name}
          onChange={handleChange}
          required
        />

        </DialogContent>
        <DialogActions>
          <Button onClick={() => setShowEditModal(false)} color="primary">
            Cancel
          </Button>
          <Button onClick={handleUpdate} color="primary">
            Update
          </Button>
        </DialogActions>
      </Dialog>
      <Dialog open={showAddModal} onClose={() => setShowAddModal(false)}>
        <DialogTitle>Add Entity</DialogTitle>
        <DialogContent className={classes.dialogContent}>
<TextField
          fullWidth
          margin="normal"
          label="Name"
          variant="outlined"
          name="name"
          value={newEntity.name}
          onChange={handleChange}
          required
        />

 

        </DialogContent>
        <DialogActions>
          <Button onClick={() => setShowAddModal(false)} color="primary">
            Cancel
          </Button>
          <Button onClick={handleAdd

} color="primary">
            Add
          </Button>
        </DialogActions>
      </Dialog>


      <Dialog open={showDeleteModal} onClose={() => setShowDeleteModal(false)}>
        <DialogTitle>Confirm Delete</DialogTitle>
        <DialogContent>
          <Typography>Are you sure you want to delete this entity?</Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setShowDeleteModal(false)} color="primary">
            Cancel
          </Button>
          <Button onClick={handleDelete} color="primary">
            Delete
          </Button>
        </DialogActions>
      </Dialog>
      <Snackbar
        open={openSnackbar}
        autoHideDuration={6000}
        onClose={() => setOpenSnackbar(false)}
      >
        <Alert onClose={() => setOpenSnackbar(false)} severity={snackbarSeverity}>
          {snackbarMessage}
        </Alert>
      </Snackbar>
    </div>
  );
};

export default EntityTable;
