Untitled

import { Form, message, Space, Switch } from "antd";
import { SUBMIT_FAILED, SUBMIT_SUCCESS } from "constants/MessageConstant";
import { VISIBLE_COLUMNS_ENTERPRISES_KEY } from "constants/VisibleColumnsKeyConstant";
import { Fragment, useEffect, useMemo, useState } from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { useCreateConfigurationMutation } from "store/services/configurationApiSlice";
import { ColumnDrawerContainer } from "..";

export function EnterpriseColumns(props) {
  const [form] = Form.useForm();

  const { isOpen, onClose, visibleColumns, defaultColumns } = props;

  const [toggleColumns, setToggleColumns] = useState(visibleColumns.filter(column => column).length > 0 ? true : false);

  const [columnsForm, setColumnsForm] = useState(() => {
    return defaultColumns
      .filter(defaultColumn => defaultColumn.dataIndex)
      .map(defaultColumn => ({
        dataIndex: defaultColumn.dataIndex,
        title: defaultColumn.title,
      }));
  });

  const [createConfiguration, {
    isLoading: createConfigurationIsLoading,
  }] = useCreateConfigurationMutation();

  const onFinish = (values) => {
    console.log(values);
    console.log(columnsForm);

    const columnsArray = Object.entries(values).filter(([key, value]) => value).map(([key, value]) => key);

    const configuration = {
      key: VISIBLE_COLUMNS_ENTERPRISES_KEY,
      value: columnsArray.length >= 1 ? columnsArray : [null],
    }

    createConfiguration({ configuration }).unwrap().then(response => {
      message.success(SUBMIT_SUCCESS);
      onClose();
    }).catch(error => {
      message.error(SUBMIT_FAILED);
    });
  }

  const onToggleColumns = () => { // Habilitar ou desabilitar todos os switches
    setToggleColumns(!toggleColumns);

    columnsForm.map(column => {
      form.setFieldValue(column.dataIndex, !toggleColumns);
    });
  }

  const onValuesChange = (changedValues, allValues) => {
    const columnsArray = Object.entries(allValues).filter(([key, value]) => value).map(([key, value]) => key);

    if (columnsArray.length <= 0) {
      setToggleColumns(false);
      return;
    }

    if (!toggleColumns && columnsArray.length > 0) {
      setToggleColumns(true);
      return;
    }
  }

  const handleOnDragEnd = (result) => {
    if (!result.destination) return;

    const items = Array.from(columnsForm);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);
    setColumnsForm(items);
  }

  useEffect(() => {
    visibleColumns.map(column => {
      form.setFieldValue(column, true);
    });

    setToggleColumns(visibleColumns.filter(column => column).length > 0 ? true : false);
  }, [visibleColumns]);

  return (
    <ColumnDrawerContainer isOpen={isOpen} onClose={onClose} isSubmitting={createConfigurationIsLoading}>
      <div>
        <Space align="center" className="border-bottom w-100" style={{ paddingBottom: 8 }}>
          <Switch checked={toggleColumns} onChange={onToggleColumns} size="small" />
          <span className="text-gray-light">Colunas</span>
        </Space>

        <Form form={form} onFinish={onFinish} onValuesChange={onValuesChange} id={"columnsForm"}>
          <DragDropContext onDragEnd={handleOnDragEnd}>
            <Droppable droppableId="columns">
              {(provided) => (
                <div {...provided.droppableProps} ref={provided.innerRef}>
                  {columnsForm.map((column, index) => (
                    <Draggable key={column.dataIndex} draggableId={column.dataIndex} index={index}>
                      {(provided) => (
                        <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                          <Form.Item className="border-bottom" style={{ marginBottom: 0 }}>
                            <Space align="center">
                              <Form.Item name={column.dataIndex} valuePropName="checked" noStyle>
                                <Switch size="small" />
                              </Form.Item>

                              <span className="text-gray-light">{column.title}</span>
                            </Space>
                          </Form.Item>
                        </div>
                      )}
                    </Draggable>
                  ))}

                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </DragDropContext>
        </Form>
      </div>
    </ColumnDrawerContainer >
  );
}