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 }: any) => {
  const [formData, setFormData] = useState(initialData || initialMember);

  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();
  };

  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</DialogTitle>
    <DialogContent>
    <div className="flex justify-between">
      <Typography sx={{color:'grey'}}>Customer Data</Typography>
      <Typography sx={{color:'grey'}} display="flex" justifyContent="flex-end">Created: {generateDate(formData.created_at, 'datetime')}</Typography>
    </div>
      <TextField fullWidth margin="dense" label="Full Name" name="fullname" value={formData.fullname} onChange={handleChange} />
      <TextField fullWidth margin="dense" label="Email" name="email" value={formData.email} onChange={handleChange} />
      <TextField type="file" fullWidth margin="dense" label="Photo" name="photouser" value={formData.photouser} onChange={handleChange} />
      <TextField fullWidth margin="dense" label="Username" name="username" value={formData.username} onChange={handleChange} />
      <TextField fullWidth margin="dense" label="MSISDN" name="msisdn" value={formData.msisdn} onChange={handleChange} />
      <TextField fullWidth margin="dense" label="Address" name="address" value={formData.address} onChange={handleChange} />
      <TextField fullWidth margin="dense" label="Nationality" name="nationality" value={formData.nationality} onChange={handleChange} />
      <TextField 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 name="gender" value={formData.gender} onChange={handleChange}>
          <MenuItem value="M">Male</MenuItem>
          <MenuItem value="F">Female</MenuItem>
        </Select>
      </FormControl>
      <TextField fullWidth margin="dense" label="Identity Type" name="identity_type" value={formData.identity_type} onChange={handleChange} />
      <TextField fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
      <TextField type="number" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
      <TextField 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 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 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 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 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 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 fullWidth margin="dense" label="Bank Name" name="bank_name" value={formData.bank_name} onChange={handleChange} />
      <TextField fullWidth margin="dense" label="Bank Account" name="bank_account" value={formData.bank_account} onChange={handleChange} />
      <TextField fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} />
    </DialogContent>
    <DialogActions>
      <Button onClick={handleClose} color="secondary">Cancel</Button>
      <Button onClick={onSubmit} color="primary" variant="contained">Submit</Button>
    </DialogActions>
  </Dialog>
  );
};

export default CustomerDialog;
