import { DataTable } from '@/components/ui/DataTable';
import { getColumns, Group } from './Column';
import { apiConfig } from '@/config/api.config';
import axios, { AxiosResponse } from 'axios';
import { Helmet } from 'react-helmet';
import {
  DialogContent,
  MenuItem,
  Radio,
  RadioGroup,
  FormControlLabel,
  FormControl,
  Dialog,
  DialogTitle,
  Typography,
  Button,
  Box,
  Breadcrumbs,
  Link
} from '@mui/material';
import { useState, useEffect } from 'react';
// import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import Divider from '@mui/material/Divider';
import ConfirmDialog from '@/components/confirm';
import { toast } from 'sonner';
import { Container, DataGridLoader, DataGridProvider, LoaderTransparant } from '@/components';
import { ListToolBar } from './ListToolbar';
import { RefreshCw } from 'lucide-react';
import { setgroups } from 'process';
// import { DialogHeader } from '@/components/ui/dialog';
// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
const BASE_URL = apiConfig.service_customer;

let initGroup = {
  id: '',
  groupName: '',
  status: '',
  description: '',
  pin_length: '',
  max_pin_attempts: '',
  default_notification: ''
};

const ManageGroups = () => {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [dataGroup, setDataGroup] = useState([]);
  const [formData, setFormData] = useState(initGroup);
  const [pageIndex, setPageIndex] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [dialogType, setDialogType] = useState('');
  const [dialogOpen, setDialogOpen] = useState(false);
  const [isReloading, setIsReloading] = useState(false);
  // const closeDialog = () => {
  //   setIsDialogOpen(false);
  //   setgroups(initGroup);  
  // };

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

  async function fetchGroups(): Promise<void> {
    setIsReloading(true);
    try {
      let groups = await axios.get(`${BASE_URL}/groups/list`, {
        params: {
          limit: 20,
          page: 1,
          with_deleted: false,
          order_field: 'created_at',
          order_direction: 'DESC'
        }
      });
      let temp = 1;
      let resGroups = groups.data.data.list.map((el: any) => {
        el.no = temp++;
        if (el.date_birth) {
          const d = new Date(el.date_birth);
          el.date_birth = d.toLocaleString('sv-SE');
        }
        return el;
      });
      setDataGroup(resGroups);
    } catch (error: any) {
      alert(error.message);
      console.log(error);
    } finally {
      // setLoading(false);
      setIsReloading(false);
    }
  }

  const openDialog = () => setIsDialogOpen(true);
  const closeDialog = () => {
    setIsDialogOpen(false);
    setFormData(initGroup);
  };

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.groupName) return toast.warning(`Group name can not be empty!`);
    if (!formData.status) return toast.warning(`Status can not be empty!`);
    if (!formData.description) return toast.warning(`Description can not be empty!`);
    setIsDialogOpen(false);
    setDialogOpen(true);
  };

  function createGroup() {
    setDialogType('create');
    openDialog();
  }

  const handleUpdate = (group: any) => {
    setFormData({
      ...formData,
      id: group.id,
      groupName: group.name,
      status: group.status,
      description: group.description
    });
    setDialogType('update');
    setIsDialogOpen(true);
  };

  const handleDelete = (group: any) => {
    setFormData({
      ...formData,
      id: group.id,
      groupName: group.name,
      status: group.status,
      description: group.description
    });
    setDialogType('delete');
    setDialogOpen(true);
  };

  const handleReload = () => {
    setIsReloading(true);
    fetchGroups();
  };

  const handleYes = async () => {
    setIsReloading(true);
    try {
      if (dialogType === 'create') {
        await axios.post(`${BASE_URL}/groups/create`, {
          name: formData.groupName,
          status: formData.status,
          description: formData.description,
          created_at: new Date()
        });
        toast.success(`Success create group`);
      } else if (dialogType === 'update') {
        await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
          name: formData.groupName,
          status: formData.status,
          description: formData.description,
          updated_at: new Date()
        });
        toast.success(`Success update group`);
      } else if (dialogType === 'delete') {
        await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`);
        toast.success(`Success delete group`);
      }
    } catch (error: any) {
      console.log(error);
      toast.error(error.message);
    } finally {
      setDialogOpen(false);
      closeDialog();
      await fetchGroups();
      setLoading(false);
    }
  };

  function setShowAddDialog(el: any) {
    setIsDialogOpen(el);
  }

  if (loading) return <LoaderTransparant />;

  return (
    <>
      <Helmet>
        <title>TPAY | Manage Group</title>
      </Helmet>
      <Container>
        <ConfirmDialog
          open={dialogOpen}
          onClose={() => setDialogOpen(false)}
          title="Confirm Action"
          content={
            `Are you sure you want to ` +
            (dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
          }
          onYes={handleYes}
          onNo={() => setDialogOpen(false)}
        />
        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Groups</h1>
        <Breadcrumbs>
          <Link underline="none" color="inherit" href="/">
            <span className="text-sm hover:underline">Dashboard</span>
          </Link>

          <Link underline="none" color="inherit">
            <span className="text-sm">Groups</span>
          </Link>

          <Link underline="none" color="inherit">
            <span className="text-sm">Manage Groups</span>
          </Link>
        </Breadcrumbs>
        {/* <div className="w-full overflow-x-auto px-4"> */}

        <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
          {isReloading && (
            <DataGridLoader />
            // <div className="fixed inset-0 bg-white/25 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
            //   <div className="bg-card flex items-center border shadow-sm rounded-md">
            //     <div className="flex flex-col items-center">
            //       <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
            //       <span className="text-slate-500 font-medium">Refreshing data...</span>
            //     </div>
            //   </div>
            // </div>
          )}
          <DataGridProvider
            data={dataGroup}
            columns={getColumns(handleUpdate)}
            pagination={{ size: 10 }}
            toolbar={
              <ListToolBar
                createGroup={createGroup}
                onReload={handleReload}
                isReloading={isReloading}
              />
            }
            layout={{ card: true }}
            serverSide={false}
            onRowSelectionChange={(selected, table: any) => {
              const selectedRow = table.getSelectedRowModel().rows[0];
              if (selectedRow) handleUpdate(selectedRow.original);
            }}
          />
        </div>
        {/* </div> */}

        <Dialog open={isDialogOpen} onClose={closeDialog}>
          <DialogContent className="w-full">
            <div className="flex justify-between">
              <DialogTitle>
                {dialogType === 'create' ? 'Create New Group' : 'Update Group'}
              </DialogTitle>
              <Box display="flex" justifyContent="flex-end">
                <Button
                  variant="outlined"
                  sx={{ borderColor: 'white', color: 'grey' }}
                  onClick={closeDialog}
                >
                  <CloseIcon />
                </Button>
              </Box>
            </div>
            <Divider />
            <div className="p-5 mt-5">
              <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
                <div className="grid grid-cols-4 items-center gap-4 w-full">
                  <label className="form-label text-sm">
                    <span className="text-red-500">*</span>Group Name:
                  </label>
                  <input
                    type="text"
                    name="groupName"
                    className="input w-full col-span-3"
                    value={formData.groupName}
                    onChange={handleChange}
                  />
                </div>
                <div className="grid grid-cols-4 items-center gap-4 w-full">
                  <label className="form-label text-sm">
                    <span className="text-red-500">*</span>Active Status:
                  </label>
                  <FormControl>
                    <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
                      <FormControlLabel
                        value="Y"
                        checked={formData.status === 'Y'}
                        control={<Radio />}
                        label="Yes"
                      />
                      <FormControlLabel
                        value="N"
                        checked={formData.status === 'N'}
                        control={<Radio />}
                        label="No"
                      />
                    </RadioGroup>
                  </FormControl>
                </div>
                <div className="grid grid-cols-4 items-center gap-4 w-full">
                  <label className="form-label text-sm">
                    <span className="text-red-500">*</span>Description:
                  </label>
                  <input
                    type="text"
                    name="description"
                    className="input w-full col-span-3"
                    value={formData.description}
                    onChange={handleChange}
                  />
                </div>
                <Button type="submit">Submit</Button>
              </form>
            </div>
          </DialogContent>
        </Dialog>
      </Container>
    </>
  );
};

export default ManageGroups;