import React, { useState } from 'react';
import { Box, Button, Typography } from '@mui/material';
import AddEditCategoryModal from '../../components/AddEditCategoryModal';
import { useForm } from 'react-hook-form';
import CustomTable from '../../components/CustomTable';
import DeleteModal from '../../components/Modals/DeleteModal';

// Sample data for categories
// const categoryRows = [
//   { srno: 1, name: 'Strength', date: '01/03/2025' },
//   {
//     srno: 2,
//     name: 'HIIT (High-Intensity Interval Training)',
//     date: '01/03/2025',
//   },
//   { srno: 3, name: 'Cardio', date: '01/03/2025' },
//   { srno: 4, name: 'Combat', date: '01/03/2025' },
//   { srno: 5, name: 'Yoga', date: '01/03/2025' },
// ];

export default function Vehicles() {
  const [modalOpen, setModalOpen] = useState<boolean>(false);
  const [editRow, setEditRow] = useState<any>(null);
  const { reset } = useForm();

  const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
  const [rowData, setRowData] = React.useState<any | null>(null);

  const handleClickOpen = () => {
    setModalOpen(true);
    setEditRow(null);
  };

  const handleCloseModal = () => {
    setModalOpen(false);
    reset();
  };

  // const handleEdit = () => {
  //   setEditRow(rowData);
  // };

  const handleDelete = () => {
    console.log('Deleted row:', rowData);
    setDeleteModal(false);
  };

  const categoryColumns = [
    { id: 'srno', label: 'Sr No' },
    { id: 'name', label: 'Category Name' },
    { id: 'date', label: 'Date' },
    { id: 'action', label: 'Action', align: 'center' },
  ];

  return (
    <>
      <Box
        sx={{
          width: '100%',
          maxWidth: {
            sm: '100%',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          },
        }}
      >
        {/* Title and Add Category button */}
        {/* <Typography component="h2" variant="h6" sx={{ mt: 2, fontWeight: 600 }}>
          Vehicles
        </Typography> */}
        <Button
          variant="contained"
          size="medium"
          sx={{ textAlign: 'right' }}
          onClick={handleClickOpen}
        >
          Add Categorywewfw
        </Button>
      </Box>

      <CustomTable
        columns={categoryColumns}
        rows={categoryRows}
        editRow={editRow}
        setDeleteModal={setDeleteModal}
        setRowData={setRowData}
        setModalOpen={setModalOpen}
      />
      <AddEditCategoryModal
        open={modalOpen}
        handleClose={handleCloseModal}
        editRow={rowData}
      />
      <DeleteModal
        open={deleteModal}
        setDeleteModal={setDeleteModal}
        handleDelete={handleDelete}
      />
    </>
  );
}
