revenue-fe/src/pages/members/manage-members/CustomerDetailModal.tsx

import React, { useState, useEffect } from "react";
import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  TextField,
  Button,
  MenuItem,
  Select,
  InputLabel,
  FormControl,
  Typography
} from "@mui/material";
import Divider from '@mui/material/Divider';
import { initialMember } from "./Columns";

const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject }: any) => {
  const [formData, setFormData] = useState(initialData || initialMember);
  const [viewOnly, setViewOnly] = useState(viewStats || false);

  useEffect(() => {
    setFormData(initialData || {}); // Sync formData when initialData changes
  }, [initialData]);


  const handleChange = (e: any) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const onSubmit = () => {
    handleSubmit(formData);
    handleClose();
  };

  const onReject = () => {
    handleReject(formData);
    handleClose();
  }

  function generateDate(date: any, type: any) {
    if (!date) return ''
    const today = new Date(date);
    if (type === 'datetime') return today.toISOString().replace('T', ' ').substring(0, 19);
    return today.toISOString().split('T')[0];
  }

  return (
    <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
      <DialogTitle>Customer Form ({viewOnly ? 'View' : 'Edit'})</DialogTitle>
      <DialogContent>
        <div className="flex justify-between pb-5">
          <Typography sx={{color:'grey'}}>Customer Data</Typography>
          <Typography sx={{color:'grey'}} display="flex" justifyContent="flex-end">Created: {generateDate(formData.created_at, 'datetime')}</Typography>
        </div>
        {
          formData.isneedapproval == 1 ? (
          <div className="flex justify-between pb-5">
            <Typography sx={{color:'orange'}}>User Request for approval </Typography>
          </div>
          ) : ('')
        }

        <TextField disabled={viewOnly} fullWidth margin="dense" label="Full Name" name="fullname" value={formData.fullname} onChange={handleChange} />
        <TextField disabled={viewOnly} fullWidth margin="dense" label="Email" name="email" value={formData.email} onChange={handleChange} />
        <TextField disabled fullWidth margin="dense" label="Group" name="group" value={formData.group_name} onChange={handleChange} />
        <TextField disabled={viewOnly} type="file" fullWidth margin="dense" label="Photo" name="photouser" value={formData.photouser} onChange={handleChange} />
        <TextField disabled={viewOnly} fullWidth margin="dense" label="Username" name="username" value={formData.username} onChange={handleChange} />
        <TextField disabled={viewOnly} fullWidth margin="dense" label="MSISDN" name="msisdn" value={formData.msisdn} onChange={handleChange} />
        <TextField disabled={viewOnly} fullWidth margin="dense" label="Address" name="address" value={formData.address} onChange={handleChange} />
        <TextField disabled={viewOnly} fullWidth margin="dense" label="Nationality" name="nationality" value={formData.nationality} onChange={handleChange} />
        <TextField disabled={viewOnly} fullWidth margin="dense" label="Date of Birth" name="date_birth" type="date" value={generateDate(formData.date_birth, null)} onChange={handleChange} InputLabelProps={{ shrink: true }} />
        <FormControl fullWidth margin="dense">
          <InputLabel>Gender</InputLabel>
          <Select disabled={viewOnly} name="gender" value={formData.gender} onChange={handleChange}>
            <MenuItem value="M">Male</MenuItem>
            <MenuItem value="F">Female</MenuItem>
          </Select>
        </FormControl>
        <FormControl fullWidth margin="dense">
          <InputLabel>Identity Type</InputLabel>
          <Select disabled={viewOnly} name="identity_type" value={formData.identity_type} onChange={handleChange}>
            <MenuItem value="eleitoral_id">Eleitoral ID</MenuItem>
            <MenuItem value="bihete_de_identidade">Bihete de Identidade</MenuItem>
            <MenuItem value="passport">Passport</MenuItem>
          </Select>
        </FormControl>
        <TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
        <TextField disabled={viewOnly} type="number" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
        <TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} />
        {/* <TextField fullWidth margin="dense" label="Password" name="password" type="password" value={formData.password} onChange={handleChange} /> */}
        {/* <TextField fullWidth margin="dense" label="PIN" name="pin" value={formData.pin} onChange={handleChange} /> */}
        <FormControl fullWidth margin="dense">
          <InputLabel>Status</InputLabel>
          <Select disabled={viewOnly} name="status" value={formData.status} onChange={handleChange}>
            <MenuItem value="Y">Active</MenuItem>
            <MenuItem value="N">Inactive</MenuItem>
          </Select>
        </FormControl>
        
        <FormControl fullWidth margin="dense">
          <InputLabel>Municipio</InputLabel>
          <Select disabled={viewOnly} name="municipio" value={formData.municipio} onChange={handleChange}>
            <MenuItem value="municipio1">Municipio 1</MenuItem>
            <MenuItem value="municipio2">Municipio 2</MenuItem>
          </Select>
        </FormControl>
        
        <FormControl fullWidth margin="dense">
          <InputLabel>Posto</InputLabel>
          <Select disabled={viewOnly} name="posto_adms" value={formData.posto_adms} onChange={handleChange}>
            <MenuItem value="posto1">Posto 1</MenuItem>
            <MenuItem value="posto2">Posto 2</MenuItem>
          </Select>
        </FormControl>

        <FormControl fullWidth margin="dense">
          <InputLabel>Suco</InputLabel>
          <Select disabled={viewOnly} name="suco" value={formData.suco} onChange={handleChange}>
            <MenuItem value="posto1">suco 1</MenuItem>
            <MenuItem value="posto2">suco 2</MenuItem>
          </Select>
        </FormControl>

        <FormControl fullWidth margin="dense">
          <InputLabel>Aldeia</InputLabel>
          <Select disabled={viewOnly} name="aldeia" value={formData.aldeia} onChange={handleChange}>
            <MenuItem value="posto1">aldeia 1</MenuItem>
            <MenuItem value="posto2">aldeia 2</MenuItem>
          </Select>
        </FormControl>

        <Divider className="pt-7"/>
        <Typography sx={{color:'grey'}}>Bank</Typography>
        <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Name" name="bank_name" value={formData.bank_name} onChange={handleChange} />
        <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Account" name="bank_account" value={formData.bank_account} onChange={handleChange} />
        <TextField disabled={viewOnly} fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} />
      </DialogContent>
      <DialogActions>
        <Button onClick={() => viewOnly ? setViewOnly(false) : setViewOnly(true)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
        <Button onClick={handleClose} color="secondary">Cancel</Button>
        {
          formData.isneedapproval == 1 ? (
            <Button onClick={onReject} color="warning" variant="contained">Reject</Button>
          ) : ('')
        }
        <Button onClick={onSubmit} color="primary" variant="contained">
          { formData.isneedapproval == 1 ? (`Edit & Approve`) : (`Edit`) }
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default CustomerDialog;