import { useRef, useState } from "react";
import { Form, Modal, Tooltip, notification } from "antd";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import { Tabla } from "../../../components";
import { SimpleTableLayout } from "../../../components/layouts";
import { ActionsButton } from "../../../components";
import { isEllipsis, eliminarRegistro } from "../../../utilities";
import { Link, useNavigate } from "react-router-dom";
import Formulario from "./Formulario";

const endPoint = "fin-movilizacion";
const endPointEliminar = "fin-movilizacion/eliminar";

const FinMovilizaciones = () => {
  const tablaRef = useRef(null);
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [buscarParams, setBuscarParams] = useState({
    padre: true,
  });

  const onFinish = (values) => {
    const { q } = values;
    const params = {
      q: q ?? "",
      padre: true,
    };
    setBuscarParams(params);    
  };

  const botones = [
    {
      onClick: () => navigate(`/administracion/catalogos/finMovilizaciones/agregar`),
      props: { disabled: false, type: "primary", block: false },
      text: "Nuevo",
      icon: <PlusOutlined />,
    },
  ];

  const linkText = (value, row, key) => (
    <Link
      to={`/administracion/catalogos/finMovilizaciones/editar?id=${row.id}`}
      style={{ color: "black" }}
    >
      {isEllipsis(columns, key) ? (
        <Tooltip title={value}>{value}</Tooltip>
      ) : (
        value
      )}
    </Link>
  );


  const columns = [
    {
      title: "Acciones",
      key: "correo",
      dataIndex: "correo",
      width: 100,
      align: "center",
      render: (_, item) => (
        <ActionsButton
          data={[
            {
              label: "Editar",
              onClick: () =>
                navigate(`/administracion/catalogos/finMovilizaciones/editar?id=${item?.id}`),
            },
            {
              label: "Eliminar",
              onClick: () => {
                eliminarRegistro(`${item.nombre}`, item.id, endPointEliminar, () =>
                  tablaRef.current.refresh()
                );
              },
              danger: true,
            },
          ]}
        />
      ),
    },
    {
      title: "Nombre",
      key: "nombre",
      dataIndex: "nombre",
      render: linkText,
    },
    {
      title: "ID Sagarhpa",
      key: "idSagarhpa",
      dataIndex: "idSagarhpa",
      render: linkText,
    },
  ];

  return (
    <SimpleTableLayout
      btnGroup={{
        btnGroup: botones,
      }}
    >
      <Formulario
        form={form}
        onFinish={onFinish} 
      />
      <Tabla
        columns={columns}
        nameURL={endPoint}
        extraParams={buscarParams}
        scroll={{ x: "30vw" }}
        ref={tablaRef}
      />
    </SimpleTableLayout>
  );
};

export default FinMovilizaciones;